React useState懒初始化时props.rows初始为空致状态默认值错误

你当前的实现存在几处逻辑错误，直接导致初始化不符合预期：

• useState的懒初始化回调必须显式return初始状态值，你当前只调用了setAllValues(false)没有写返回值，状态初始值会是undefined
• setAllValues被定义为async函数，所有async函数的返回值都是Promise对象，即便你加了return，拿到的也不是实际计算出的temp对象
• useState懒初始化逻辑仅在组件首次挂载时执行1次，首次挂载时你从props拿到的rows是空数组，后续rows更新时初始化逻辑不会重复执行，自然拿不到正确的初始值
• 额外逻辑错误：Array.prototype.forEach是同步遍历方法，前面加await没有任何实际效果；你使用的temp是组件外的游离变量，多次渲染时很容易出现值污染。

方案1：组件内监听rows变化完成初始化（无需改动父组件，推荐） #

不要在useState懒初始化中处理依赖后续props更新的逻辑，先将状态初始值设为空对象，通过useEffect监听rows变化，当rows变为有效非空数组、且状态还未完成初始化时，再同步计算初始值并赋值：

// 初始值设为空对象，不在懒初始化阶段执行依赖后续props的逻辑
const [rowValues, setRowValues] = React.useState({});

React.useEffect(() => {
  // 校验：rows为非空有效数组、且rowValues还未初始化时才执行赋值
  if (Array.isArray(rows) && rows.length > 0 && Object.keys(rowValues).length === 0) {
    // 直接用reduce同步生成初始值，不需要异步函数
    const initialValues = rows.reduce((acc, element) => {
      acc[element.id] = false;
      return acc;
    }, {});
    setRowValues(initialValues);
  }
}, [rows, rowValues]);

你原来的setAllValues逻辑完全可以通过同步的reduce实现，不需要写async/await，对forEach加await属于无效写法。

方案2：父组件拦截加载态，避免传空数组 #

如果rows是父组件通过异步接口获取的数据，可以在父组件层增加加载态判断：等接口返回、rows拿到有效数组之后再渲染当前子组件，这样子组件首次挂载时拿到的rows就是有效数据，懒初始化逻辑可以正常执行：

// 父组件逻辑示例
const [rows, setRows] = React.useState([]);
const [isLoading, setIsLoading] = React.useState(true);

React.useEffect(() => {
  // 模拟接口请求获取rows数据
  fetchRowData().then(res => {
    setRows(res);
    setIsLoading(false);
  });
}, []);

// 加载阶段展示占位，不渲染子组件，避免子组件拿到空数组
if (isLoading) return <div>数据加载中</div>;
return <RowComponent rows={rows} />;

这种方案不需要子组件额外写初始化判断逻辑，但需要父组件配合做加载态拦截。

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