Question

我的uploadStatus状态有问题。我没有得到react-hooks状态的更新值。如果我在fileOnProgress（）内添加console.log（），我将获得uploadStatus状态的[]值。

我尝试将uploadStatus状态置于useEffect中，但发生无限循环，因为该状态也在函数内部进行了更新。

注意：在这种情况下，uploadStatus已经由其他函数填充，这就是为什么我希望获得更新后的值。

import React, { useEffect, useState } from 'react';

function Dropzone {

  const [ uploadStatus, setUploadStatus ] = useState([]);
  const [ resumableFiles, setResumableFiles ] = useState([]);

  const resumableListener = () => {
      if (resumableFiles.length === 0) return;
      resumableFiles.map(resumable => {
          resumable.on('progress', () => {
              fileOnProgress(resumable);
          });
          resumable.on('fileError', (error) => {
              console.log(error)
          });
      });
  };

  const fileOnProgress = (resumable) => {
      const file = resumable.files[0];
      const size = (file.size / 1048576).toFixed(2);
      const progress = (resumable.progress() * 100).toFixed(2).toString() + '%';
      const cont = [...uploadStatus];

      cont.map(d => {
          if (d.id === file.uniqueIdentifier) {
              d.status = progress;
          }
      });
      setUploadStatus(cont);  
  };

  useEffect(() => {
      resumableListener();
  }, [resumableFiles]);

  ...

}

Answer 1

Array.map返回一个新数组，因此请尝试：

  const newCont = cont.map(d => {
      if (d.id === file.uniqueIdentifier) {
          d.status = progress;
      }

      return d;
  });
  setUploadStatus(newCont);

如@go_diego所指出的，您还缺少地图中的返回值。

MDN docs for reference

React Hooks-无法获取更新的状态值

1 个答案: