React Promise链操作后useState赋值失效 调用map报undefined错误

问题根因 #

• 子组件useEffect未将fundsList加入依赖数组，仅在组件首次挂载时执行，此时父组件异步请求尚未完成，fundsList为初始的undefined，调用map方法直接报错
• setFunds是React状态更新函数，为同步方法，不返回Promise，调用.then()属于错误写法
• 可选优化：子组件无需将props传入的fundsList重复存储到内部state，直接使用props即可减少冗余逻辑

修复方案 #

第一步：父组件状态初始化时添加默认值 #

父组件定义fundsList状态时设置初始值为空数组，避免传递到子组件时为undefined：

const [fundsList, setFundsList] = useState([])

第二步：子组件修复 #

方式1：保留内部state写法

export default function Table({ fundsList }) {
  const [funds, setFunds] = React.useState([]);

  // 将fundsList加入依赖数组，值变化时自动执行
  React.useEffect(() => {
    // 先判断类型避免异常
    if (Array.isArray(fundsList)) {
      const newFunds = fundsList.map(strat => ({
        gainToday: "0.00%",
        title: strat,
        gainOverall: "0.00%"
      }))
      setFunds(newFunds)
      console.log(newFunds)
    }
  }, [fundsList]);

  return(
    {funds.map(fund => (
      <tr key={fund.title}>
        {/* 原有渲染逻辑 */}
      </tr>
    ))}
  )
}

方式2：更简洁的无内部state写法

// 直接给props设置默认值
export default function Table({ fundsList = [] }) {
  // 无需转存state，直接遍历props渲染
  return(
    {fundsList.map(strat => (
      <tr key={strat}>
        <td>{strat}</td>
        <td>0.00%</td>
        <td>0.00%</td>
        {/* 其他渲染逻辑 */}
      </tr>
    ))}
  )
}

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