React 在获取数据时多次渲染组件

Question

我正在使用 fetch api，所以我的目标是发出 POST 请求，然后将从该调用收到的结果存储在一个状态中。这是我使用的代码：

interface IPreviewFile {
file: IFile;
}

export default function PreviewFileModal({ file }: IPreviewFile) {
  const source = useSelector((state: AppState) => state.source);
  const project = useSelector((state: AppState) => state.project);

  const data = {
    fileName: file.path,
    accountName: source.Name,
    bucket: source.bucket,
    id: source.id
  };

  useEffect(() => {
    Promise.all([
      fetch(`${API_URL}/api/project/${project.id}/filepreview`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
    ])
      .then(async ([aa]) => {
        const a = await aa.json();
        return [a];
      })
      .then((responseText) => {
        setStringArray(readString(responseText[0].value).data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [project.id, data]);

  console.log(stringArray);
  return (
    <>
      <div></div>
    </>
  );
}

console.log(stringArray); 在延迟 2-3 秒后一直在控制台中打印。如您所见，我使用 Promise 来避免这种情况，但由于某种原因它仍然会发生。任何想法是什么导致一直重新渲染以及如何解决它？

Answer 1

我已经尝试稍微更改代码以避免由于添加为 useEffect 的依赖项的数据变量而重新渲染组件。我没有看到任何对 stringArray 的引用，所以我将其添加为状态变量。

export default function PreviewFileModal({ file }: IPreviewFile) {
  const source = useSelector((state: AppState) => state.source);
  const project = useSelector((state: AppState) => state.project);
  const [stringArray, setStringArray] = useState("");

   useEffect(() => {
     
    fetch(`${API_URL}/api/project/${project.id}/filepreview`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        fileName: file.path,
        accountName: source.Name,
        bucket: source.bucket,
        id: source.id
      })
    })
    .then(res => res.json())
    .then((result) => {
      result && setStringArray(readString(result.value).data);
    })
    .catch((err) => {
      console.log(err);
    });
  }, [project.id]);

  console.log(stringArray);
  return (
    <>
      <div></div>
    </>
  );
}

React 在获取数据时多次渲染组件

React renders component many times when fetching data

typescript

reactjs

fetch-api