文件 Reader 不符合顺序

Question

我正在做一个带有预览的多图像上传组件，但我遇到了一个问题，该问题有时只发生在执行图像预览的代码段中。

  useEffect(() => {
    if (props.images.length > 0) {
      setPreview([]);
      for (const image of props.images) {
        if (image.type) {
          //fileChanger(props.images);
          const reader = new FileReader();
          reader.onloadend = () => {
            setPreview((prevState) => {
              return prevState.concat(reader.result)});
              //image.name
          };

          reader.readAsDataURL(image);
        } else {
          setPreview((prevState) => prevState.concat(image));
        }
      }
    } else if (props.images === null) {
      //fileChanger(props.images);

      setPreview(null);
    }
  }, [props.images, fileChanger]);

问题是图像的预览顺序与原始数组中显示的顺序不同 (props.images)。我认为这可能是由于 reader.onloadend 处理某些图像需要更长的时间，但我不确定，我正在寻求有关可能修复的建议。

Answer 1

您是对的，问题是由 reader.onloadend 引起的，因为您正在异步并行加载图像，因此无法保证触发事件的顺序。如果您需要图像的顺序与输入时的顺序相同，那么您将不得不引入一些同步。

例如：

  useEffect(() => {
    if (props.images.length > 0) {
      setPreview([]);
    
      let toLoad = props.images.length;
      let loadedImages = [];

      let synchronizedPreview = (const ordinal, const image) => {
        loadedImages[ordinal] = image;
        if (--toLoad > 0) return;
        for (const loadedImage of loadedImages) {
          setPreview((prevState) => prevState.concat(loadedImage));
        }
      };

      let index = 0;
      for (const image of props.images) {
        const ordinal = index++;
        if (image.type) {
          //fileChanger(props.images);
          const reader = new FileReader();
          reader.onloadend = () => {
            synchronizedPreview(ordinal, reader.result);
          };

          reader.readAsDataURL(image);
        } else {
          synchronizedPreview(ordinal, image);
        }
      }

    } else if (props.images === null) {
      //fileChanger(props.images);

      setPreview(null);
    }
  }, [props.images, fileChanger]);

文件 Reader 不符合顺序

File Reader not keeping order

javascript

reactjs

filereader