React结合Redux获取API数据后无法存入useState变量问题求解

问题原因 #

1. 初始状态的无效更新：组件首次挂载时，你从Redux取的earningsForSessionState初始值是空对象，此时第二个useEffect会立刻触发，earningsForSessionState.payload?.success?.data?.data的取值为undefined，你直接调用setEarnings会直接把状态覆盖成无效值。你注释掉setEarnings时，接口请求完成后Redux状态更新才会第二次触发useEffect，此时打印的就是返回的正确数据，所以你误以为只有注释掉才能拿到值。
2. 依赖项的潜在问题：你把earningsForSessionState?.payload作为依赖项，可选链语法作为依赖本身不符合Hook的依赖规范，容易导致依赖检测异常。
3. 如果你编写getEarningsReducer时没有遵循不可变更新规范，直接修改原状态对象而非返回全新的状态对象，useSelector会无法检测到状态变化，也不会触发后续的useEffect执行。

解决方法 #

首先在调用setEarnings前增加有效性判断，只有拿到符合预期的返回数据时才更新状态，同时优化依赖项写法：

useEffect(()=>{
  console.log('2222222222 第二个useEffect执行');
  const resData = earningsForSessionState.payload?.success?.data?.data;
  console.log('🎾🎾🎾🎾🎾🎾', resData);
  // 只有返回数据是数组时才更新状态
  if (Array.isArray(resData)) {
    setEarnings(resData);
  }
}, [earningsForSessionState]); // 直接把整个Redux状态作为依赖即可

另外你可以直接复用Redux里存储的收益数据，不需要在组件内用useState额外存储一份，避免两个数据源不一致的问题，减少冗余代码。

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