为什么React组件JSX中第一个<p>可识别state第二个<p>却报错？

问题根本原因 #

这是React异步数据渲染的典型问题，核心原因有两点：

1. 你初始化summaryData状态时没有设置初始值，所以组件第一次渲染时summaryData的取值是undefined
2. 数据请求是在useEffect中异步触发的，请求返回前组件就会完成首次渲染：
   • 带summaryData[0].ceo的第一个代码块外层有isDescriptionShown &&判断，isDescriptionShown初始值为false，所以这部分代码在首次渲染时根本不会执行，自然不会触发报错
   • 第二个p标签没有任何前置判断，首次渲染直接执行summaryData[0].ceo，相当于尝试读取undefined的0属性，就会抛出你遇到的Cannot read property '0' of undefined错误

两个段落的摆放顺序不影响结果，因为只要无判断的代码在首次渲染时会被执行，就必然会触发报错，和先后位置无关。

修复方案 #

你可以选择任意一种方案解决：

• 给summaryData设置初始空数组，避免首次渲染时读取undefined的属性：

  const [summaryData, setSummaryData] = useState([]);
  

• 给取值逻辑加可选链判断，兼容无数据的场景：

  <p>
    <strong>CEO: </strong> {summaryData?.[0]?.ceo}
  </p>
  

• 给整个详情区域加数据存在判断，数据没加载完成时不渲染对应内容：

  {summaryData?.length ? (
    <>
      {isDescriptionShown && (
        <p className="company-description">{summaryData[0].ceo}</p>
      )}
      <p>
        <strong>CEO: </strong> {summaryData[0].ceo}
      </p>
    </>
  ) : <p>加载中...</p>}
  

额外建议：即使接口正常返回，也有可能出现返回空数组的情况，加上可选链判断可以避免这类边界情况导致的页面崩溃。

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