在 for 循环的每次迭代中更新状态

Question

伙计们！ 在进行for-loop 的每次迭代时我遇到了一个问题，我的数组变量在状态下仍然是 1 个元素。这是我的输入
<input accept="image/*" type="file" onChange={handlePhotoChange} multiple/> 这就是handlePhotoChange 方法

const [images, setImages] = useState([])
const handlePhotoChange = async (event) => {
    const { files } = event.target;

    for (let i = 0; i < files.length; i += 1) {
      const file = files[i];

      if (!file.type.match('image')) {
        continue;
      }

      setImages([...images, { loading: true, src: null }]);
      await firebase.doUploadImage(file, auth.uid);
      const url = await firebase.getImageUrl(file.name, auth.uid);
      setImages([...images.slice(0, -1), { loading: false, src: url }]);
    }
}

我在这里所做的是在将图像上传到 Firebase 存储之前将加载变量设置为 true，并通过 loading 我显示一个加载器。然后我的上传准备好了，我得到了图像的 firebase url 并覆盖了数组 images[] 中的最后一个元素。然后我们继续下一张图片。这样，我将在每个图像上显示一个加载器。但问题是循环后的images 数组只有最后添加的元素。我想这与 setImages 函数有关，它是异步的，但正在等待您的意见。谢谢你:)

Answer 1

它是异步的，只改变一次状态。另外，如果你想访问之前的状态，你应该使用 useState 的回调版本

const [stateObject, setObjectState] = useState({
  firstKey: '',
  secondKey: '',
});

setObjectState((prevState) => ({
  ...prevState,
  secondKey: 'value',
}));

您可以将加载状态和上传状态分开，以便于管理，伪代码如下

const handlePhotoChange = (event) => {
  const { files } = event.target;
  const loadingImages = [];
  for (let i = 0; i < files.length; i += 1) {
    const file = files[i];

    if (!file.type.match('image')) {
      continue;
    }
    loadingImages.push({ file });

    firebase.doUploadImage(file, auth.uid)
      .then(// add to uploaded images state)
  }
  // set loading images state after iteration is complete
}

Answer 2

如果我正确理解您的问题，这样的解决方案是否可行：

const [images, setImages] = useState([]);

const handlePhotoChange = async (event) => {
    const { files } = event.target;

    setImages([...images, { loading: true, src: null }]);

    let newImagesArray = [];

    for (let i = 0; i < files.length; i += 1) {
      const file = files[i];

      if (!file.type.match('image')) {
        continue;
      }

      await firebase.doUploadImage(file, auth.uid);
      const url = await firebase.getImageUrl(file.name, auth.uid);
      let obj = {loading: false, src: url};
      newImagesArray.push(obj);
    }

    //get state
    let newImages = images;
    //add new images
    newImages.push(newImagesArray)
    //update state
    setImages(newImages);
}

我们正在做的是创建一个临时数组newImages 来保存所有新文件。然后，一旦我们遍历所有上传的文件，我们就将数组放入状态。

让我知道它是否有效/是否有问题。