文件阅读器不保持秩序

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]);