React.js，对象中的属性未定义但存在于具有非空值的对象中答案

【问题标题】：React.js, attribute in object is undefined but exist in object with non-null valueReact.js，对象中的属性未定义但存在于具有非空值的对象中
【发布时间】：2021-09-21 01:34:25
【问题描述】：

我想用 Dropzone 添加图片文件并在浏览器上显示预览。所以，我必须得到src，它可以在<img /> 使用。所以我做了这个过程：

  const handleAddImages = async (inputImages: any[]): Promise<void> => {
    const imagesWithSrc = inputImages.map((img) => {
      const reader = new FileReader();
      new Promise((resolve, reject) => {
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(img);
      }).then(() => (img.src = reader.result));
      return img;
    });

    const nextImages = [...currentImages, ...imagesWithSrc];
    handleOnChange({
     //set state
      target: {
        name: "images",
        value: nextImages,
      },
    });
  };

并显示该组件中的图像：

export const FileList = ({
  images
}: any) => {
  const imgs: any[] = images;

  return (
      <Wrapper>
        {imgs.map((img, index) => (
            <ImgBox key={index}>
              <img src={img.src} />
            </ImgBox>
        ))}
      </Wrapper>
  );
};

我有一个图像数组imgs 并包含图像文件对象。当我这样做时：

console.log(imgs[0]);

它将从filereader API输出索引为0的图像文件对象中的每个属性，包括base64中的图像源src。

但是当我这样做时：

console.log(imgs[0].src);

它将输出undefined，

即使我是这样在地图中进行 console.log 操作：

imgs.map((img, index) => {
  console.log(img);
  console.log(img.src);
})

得到同样的结果，有什么问题？

console.log("imgs[0]", imgs[0]); 
console.log("imgs[0].src", imgs[0].src);

输出：

顺便说一下，我一开始可以通过imgs[0].size获取size属性，添加另一张图片后获取imgs[0].src。

【问题讨论】：

你能发布console.log(imgs[0]);的输出吗？
请你分享一个imgs是什么的例子？
我发布了 imgs[0] 和 imgs[0].src 的输出捕获。
imgs[0].File.src
@Ernesto 感谢您的帮助，但是文件正是 imgs[0] 的内容，我只是添加了我编写的 console.log 的代码。

标签： javascript reactjs

【解决方案1】：

正如W3C File API 中定义的那样，File 接口（扩展Blob）没有src 属性。虽然您的环境可能会显示 src 属性，但它似乎无法从您的代码中访问，并且可能由您的浏览器的运行时或您的代码的其他部分以使其无法访问的方式添加。老实说，如果没有更多信息，我无法确定 src 属性的来源。

如果您想对 File 对象进行 base64 化，请尝试使用 FileReader API：

let blob = imgs[0];

let reader = new FileReader();
reader.readAsDataURL(blob);

reader.onload = function() {
  console.log(reader.result); //-> "data:image/png;base64,iVBORw..."
};

【讨论】：

感谢您的回答。我添加了添加src属性的部分。也许它有助于找到我可以访问 src 的原因。
哦，你又遇到了另一个问题。你不是在等待传递给inputImages.map 的 lambda 中的 Promise。 src 属性在所有代码都执行完毕并且 React 渲染完成后才会更新。
但为什么我可以在console.log(imgs[0]) 的输出中看到src 但console.log(imgs[0].src) 未定义？？
嗯，好点子，我认为解决方案的路径将涉及您重组代码以等待编码完成（我几乎可以肯定这是您的问题）并且也不修改对象这是您不在自己的代码中管理的 API 的一部分（这只是一种很好的做法，并且将使您的代码更易于维护和推理。考虑返回像 { file, src } 之类的对象，并确保使用await 等待编码完成。
是的，我认为重组也是一个好主意。无论如何感谢您的帮助和建议，我将尝试以另一种方式处理文件。

【解决方案2】：

filereader API 似乎有问题，我用这个答案解决了我的问题。 https://stackoverflow.com/a/34495914/16426251

【讨论】：