时间戳

首页 > 解决方案 > React 获取数据时多次渲染组件

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

问题描述

我正在使用fetchapi，所以我的目标是触发一个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它是为了避免这种情况，但由于某种原因它仍然会发生。任何想法是什么导致重新渲染以及如何解决它？

标签： reactjstypescriptfetch-api

解决方案

我尝试稍微更改代码以避免重新渲染组件，因为 data 变量添加为 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>
    </>
  );
}

推荐阅读