React中useState配合useEffect仍不更新，网格显示时机异常

核心问题拆解 #

• useState异步更新特性：调用setIsLoading(true)后，isLoading不会立刻同步更新，所以点击按钮后立刻判断!isLoading会拿到旧值false，导致网格提前显示。
• 冗余代码无效循环：第二个监听isLoading的useEffect完全多余，setIsLoading(isLoading)只会重复设置相同值，甚至可能触发不必要的重渲染循环。
• 状态重复维护：本地data状态和Redux中的backendData重复，没必要用本地state同步Redux数据，直接使用Redux的backendData即可。
• 网格显示时机错误：不应该在点击按钮时判断加载状态，而是要等后端请求完成、Redux数据更新后再触发网格显示。

修复方案 #

1. 清理冗余代码：删除第二个useEffect以及本地的data状态，直接使用Redux返回的backendData。
2. 修正加载状态逻辑：
   • 点击搜索时立刻设置isLoading为true，同时隐藏网格。
   • 通过监听Redux中backendData的变化，在数据更新完成后结束加载并显示网格。
3. 对齐异步请求时机：如果getSearchDetails是异步函数，用async/await包裹，确保请求流程的时序正确。

修正后的代码 #

const backendData: any = useSelector((state: RootState) => state.backendData);  
const [isLoading, setIsLoading] = useState(false);
const [gridShow, setGridShow] = useState(false);

// 后端数据更新后，结束加载并显示网格
useEffect(() => {
  // 根据实际业务判断数据是否加载完成，比如判断是否有有效数据
  if (backendData?.length || Object.keys(backendData).length) {
    setIsLoading(false);
    setGridShow(true);
  }
}, [backendData]);

const onSearchButtonClick = async () => { 
  setIsLoading(true);
  setGridShow(false); // 搜索开始时先隐藏网格
  // 若getSearchDetails是异步函数，用await确保请求时序
  await getSearchDetails();
};

补充说明 #

• 确保getSearchDetails请求完成后，会正确dispatch更新Redux中的backendData，这样上述useEffect才能触发状态更新。
• 可以根据实际业务调整backendData的判断条件，避免数据未完全准备好就显示网格。

内容的提问来源于stack exchange，提问作者veena panakanapalli