React useState 数据更新后页面未渲染问题解决方案

在 React 中，使用 useState 更新数据后，有时候页面并不会及时更新。这通常是由于在更新数据后，没有重新渲染页面导致的。

问题描述

您可能遇到了以下问题：

点击“已关闭”按钮后，接口数据已更新，但页面显示的数据仍是“未关闭”的数据。

解决方案

以下两种方法可以解决这个问题：

在数据更新后重新获取数据并渲染

在调用 setRiskData() 方法更新数据后，再调用一次 getRiskByProject() 方法来重新获取最新的数据并重新渲染页面。

const [riskData, setRiskData] = useState<any>([]);

const getRiskByProject = async (value: string) => {
  // ...
  try {
    const { data } = await getRiskByProjects(params);
    if (!data) return;
    setRiskData(data);
    getRiskByProject(value); // 重新获取数据并渲染
  } catch (error) {}
};

将 riskData 添加到 useEffect 的依赖项中

在 useEffect() 方法中添加 riskData 作为依赖项，这样每次 riskData 的值发生变化时，useEffect() 方法也会重新运行并更新页面。

useEffect(() => {
  if (paramsData && budgetKey) {
    getRiskByProject(radioValue);
    // ...
  }
}, [paramsData, budgetKey, riskData]); // 添加 riskData 作为依赖项

代码示例

const [riskData, setRiskData] = useState<any>([]);

const getRiskByProject = async (value: string) => {
  // ...
  try {
    const { data } = await getRiskByProjects(params);
    if (!data) return;
    setRiskData(data);
    getRiskByProject(value); // 重新获取数据并渲染
  } catch (error) {}
};

useEffect(() => {
  if (paramsData && budgetKey) {
    getRiskByProject(radioValue);
    // ...
  }
}, [paramsData, budgetKey, riskData]); // 添加 riskData 作为依赖项

// ...

<ContentCard title='风险'>
  <ProTable
    // ...
    dataSource={riskData}
    // ...
  />
</ContentCard>

总结

通过以上两种方法，您可以解决 React 中 useState 更新数据后页面未及时更新的问题，从而确保页面数据始终保持一致。

注意：

确保您的接口数据已更新。
避免在 useEffect 中使用异步操作，如果需要使用异步操作，可以使用 Promise 或 async/await。
如果您遇到了其他问题，请检查您的代码并确保您的代码逻辑是正确的。