React 组件不反映道具

Question

我有一个功能组件，它接受一个数组作为属性，并将该数组的 setState 函数作为 props。

安装组件时，它会获取文件并设置状态。状态设置成功，我在开发工具里看到了

当组件出现在我的屏幕上时，在 DevTools 中我看到道具也被设置为它们应该是什么，但是我的 JSX returns 中的 .map() 什么也没有，即使数组有项目。

代码：

父组件：

const [postFiles, setPostFiles] = useState([]);

子组件：（React Dropzone 挂钩）

道具：post（有url获取图片），postFiles，setPostFiles

    useEffect(() => {    
      if (post) {
        let oldImages = []  
        post.images.forEach((image) => {
          axios.get(image.image).then(res => {
            let blob = new Blob([res.data], {type:'image/png'});
            blob.lastModifiedDate = new Date();
            let file = new File([blob], getImageName(image.image), 
                                {type:'image/png'});
            file.preview = image.image;
            oldImages.push(file);    
          })
       })
       setFiles(oldImages);
      }
    }, [post])

而且我在我的 JSX 中呈现了这个常量：

    const thumbs = files.map(file => (
      <div className="thumb" key={uuidv4()}>   
        <div className="thumb-inner">    
          <a onClick={() => removeFile(file)} className="remove-image">    
            <i className="fal fa-times-circle"></i>    
          </a>    
          <img src={file.preview} />
        </div>
      </div>
    ));

即使文件状态已成功更改，它也不会反映在我呈现 {thumbs} 的组件中，直到我单击组件中的其他内容

Answer 1

以下方法可能有效，因为 axios.get 是异步的，您正试图在设置之前访问旧图像：

Promise.all(
  post.images.map((image) =>
    axios.get(image.image).then((res) => {
      let blob = new Blob([res.data], {
        type: 'image/png',
      });
      blob.lastModifiedDate = new Date();
      let file = new File(
        [blob],
        getImageName(image.image),
        { type: 'image/png' }
      );
      file.preview = image.image;
      return file;
    })
  )
).then((images) => setFiles(images));

React 组件不反映道具

React Component not reflecting props

state

rendering

reactjs