reactjs - UseEffect 中的 SetState 导致无限循环

Question

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

我不会在初始渲染中发送 initialfileList。所以我试图在 intialfileList 值更改时更新状态(文件)。但是我不明白为什么代码会进入无限循环。有人可以帮忙吗...

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

Answer 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>;
};

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