React.js中正确展示记录及解决this.state.entitiesx.data未定义错误的方法

嗨，我来帮你搞定这个问题！你遇到的this.state.entitiesx.data is undefined错误，核心原因是你把entitiesx定义成了数组，但却像访问对象一样去取它的data属性。咱们一步步来解决：

错误原因分析 #

你在state里的entitiesx是用[]包裹的数组：

this.state = {
  entitiesx: [{ /* 你的对象数据 */ }]
};

数组本身并没有data属性，data是数组里第一个元素的专属属性，所以直接写this.state.entitiesx.data肯定会找不到，自然就报错啦。

解决方案 #

有两种简单的修正方式，选哪种都可以：

方式一：调整state的结构（推荐）

既然你的entitiesx本质上是单个数据对象，不是多个对象的集合，直接去掉外层的数组括号[]就行：

this.state = {
  entitiesx: { // 这里把[]改成{}
    "success": true,
    "data": {
      // ... 剩下的原有数据保持不变
    }
  }
};

这样你原来在render里的代码就可以正常工作了，因为现在entitiesx是对象，能直接访问entitiesx.data。

方式二：在render里正确访问数组元素

如果因为某些原因必须保留entitiesx为数组，那就要先取数组的第一个元素，再访问data，同时最好加上空值判断，避免后续如果数组为空时再报错：

render() {
  // 先拿到数组里的第一个对象，同时做空值兜底
  const entityItem = this.state.entitiesx[0] || {};
  const entities = entityItem.data?.entities || [];
  
  return (
    <div className="container">
      <div>
        <h3>List of Records</h3>
        <ul>
          {entities.map((obj, i) => (
            <li key={i}>
              {obj.lemma}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

这里用了可选链操作符?.，如果entityItem.data不存在的话，会直接返回undefined，再通过|| []兜底成空数组，避免map方法报错。

对比jQuery写法的差异 #

你在jQuery里用$.each(entitiesx.data.entities, ...)能成功，是因为你当时的entitiesx应该是单个对象，而不是数组。现在React里不小心把它包成数组了，才导致访问方式不对，调整后就能和jQuery一样顺利拿到lemma值啦。

备注：内容来源于stack exchange，提问作者Nancy Moore