UseEffect 中的 SetState 导致无限循环答案

【问题标题】：SetState inside UseEffect causing infinite loopUseEffect 中的 SetState 导致无限循环
【发布时间】：2020-12-05 17:18:23
【问题描述】：

export const Upload = ({ initialfileList = [] }) => {
  console.log("called...")
  const [files,setFiles] = useState(initialfileList)
  useEffect(() => {
    setFiles(initialfileList)
  }, [initialfileList])
  return(
    .....
   )
}

我不会在初始渲染中发送初始文件列表。所以我试图在初始文件列表值更改时更新状态（文件）。但我无法理解为什么代码会进入无限循环。有人可以帮忙吗...

编辑：我想要实现的是表单中有两个上传（比如上传 A 和上传 B）和复选框。当用户在上传 A 中上传图像（比如 imgc）并点击复选框时，我希望 img c 也能在上传 B 中自动上传..

【问题讨论】：

你怎么知道它处于无限循环中？
通过控制台登录..
我能猜到的唯一潜在问题是initialfileList 在父级中不断更新。是这样吗？

标签： reactjs

【解决方案1】：

啊，我明白了。这个怎么样？

export const Upload = ({ initialfileList = [] }) => {
   const [files, setFiles] = useState(initialfileList);
   useEffect(() => {
      function isDifferentFiles(originFiles, newFiles) {
         return originFiles.length !== newFiles.length; // or whatever logic here.
      }
      if (isDifferentFiles(files, initialfileList)) {
         setFiles(initialfileList);
      }
   }, [initialfileList]);
   return <div>{files.length}</div>;
};

顺便说一句，您可能需要考虑将状态移至父级。

【讨论】：

但是在初始渲染中不会发送intialfileList..只有选中复选框时才会发送文件。
你能找出它进入无限循环的原因吗？

【解决方案2】：

听起来你需要提升你的状态——而不是在本地存储文件列表，在父组件中存储一个文件列表，将它传递给上传 A 和上传 B，还传递一个 setFileList 函数（更新父组件中的状态）。

即：

// parent component
const Parent = () => {
    const [fileList, setFileList] =  useState([])
    return (
        <Upload fileList={fileList} setFileList={setFileList} />
        <Upload fileList={fileList} setFileList={setFileList} />
    )
}

const Upload = ({fileList, setFileList}) => {
    return (
        <UploadComponent files={fileList} onUpload={setFileList} />
    )
}

这样，任一正在更新的上传组件都会同时更新。

【讨论】：