React异步请求获取的state传Props时返回null/undefined问题

问题根因 #

useEffect 内的接口请求是异步执行的，组件首次渲染时accountDetails还是你设置的初始值（null/空字符串），此时直接链式访问accountDetails.accounts[0].xxx会触发类型错误：

• 初始值为null时，访问null的属性直接抛错
• 初始值为空字符串时，字符串类型没有accounts属性，访问得到undefined，再往下取[0]同样抛错

另外你的代码里还存在字段大小写不一致的问题：接口返回字段是accountUid（小写d），传参时写的是accountUID（大写D），就算数据加载完成也会拿到undefined。

可行解决方案 #

方案1：条件渲染（最推荐） #

等接口数据返回、字段存在后再挂载子组件，同时可以自定义加载态提示：

// state初始值保持null即可，不需要改成空字符串
const [accountDetails, setAccountDetails] = useState(null);

// 组件渲染部分
<div className="App">
  {
    // 先判断accountDetails存在、且accounts数组有内容再渲染子组件
    accountDetails?.accounts?.length ? (
      <GetAccountName
        // 注意字段名和接口返回保持一致，accountUid不是accountUID
        accountUID={accountDetails.accounts[0].accountUid}
        defCategory={accountDetails.accounts[0].defaultCategory}
      />
    ) : (
      <div>账户信息加载中...</div>
    )
  }
</div>

方案2：传参时加可选链和兜底值 #

如果不想做条件判断，可以在传参时通过可选链?.和空值合并运算符??做安全访问，给未加载完成的状态传兜底默认值：

<div className="App">
  <GetAccountName
    accountUID={accountDetails?.accounts?.[0]?.accountUid ?? ''}
    defCategory={accountDetails?.accounts?.[0]?.defaultCategory ?? ''}
  />
</div>

语法说明：?.会在左侧值为null/undefined时直接返回undefined，不会继续向下读取属性触发报错；??会在左侧值为null/undefined时返回后面设置的兜底值（这里是空字符串，可根据业务需求换成null等其他值）。

额外优化：子组件增加兜底逻辑 #

可以在子组件内给props设置默认值，同时在核心props为空时返回加载占位，进一步降低报错概率：

const GetAccountName = ({ accountUID = '', defCategory = '' }) => {
  // 核心参数为空时先返回加载态
  if (!accountUID) return <span>加载中...</span>

  // 正常业务逻辑
  return <div>{/* 业务渲染内容 */}</div>
}

其他注意点 #

你代码里在fetch请求头设置"Access-Control-Allow-Origin": "*"是无效的，这个是服务端返回的响应头，客户端手动设置没有任何作用，CORS问题需要后端配合配置解决，本地开发可以通过配置代理的方式绕过。

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