尝试从数组访问信息时，React JS 返回未定义

Question

我的信息存储在 json 文件中，该文件可通过 axios 调用和 mock.js 访问，并且我能够访问我的信息。 这是数据：

information: { 
        name: 'Company name', 
        aboutParagraphs: [
           ["X"],
          ["Y"],
           ["Z"],
         ["XX"]
        ],

当我尝试访问整个数组时，它会返回所有项目。 但是，当我尝试访问单个数组时，比如information.aboutParagraphs[0] ，React 返回错误TypeError: Cannot read property '0' of undefined 。

这是代码：

<div className="col-lg-6">
<div className="mi-about-content">
    <h3>
      {information.name}
    </h3>
    <p>
  {information.aboutParagraphs[0]}
   </p>
</div>
</div>

我尝试检查其他解决方案，但它们似乎都存在语法问题或使用了错误的括号，据我所知，这里不是这种情况。 我错过了什么？ 是语法问题吗？ 提前致谢。

Answer 1

尝试这个：

{information && information.aboutParagraphs && information.aboutParagraphs[0]}

如果没有看到您的 fetch，我不能确定，但是当您尝试渲染一些您正在异步获取但尚未完成的数据时，通常会出现这些问题。

我意识到这有点矫枉过正，但这会告诉你这是否是异步问题。 如果它甚至在 fetch 完成之前尝试渲染，它将是未定义的。

上面这行所做的是在尝试呈现 information.aboutParagraphs[0] 之前检查所有 3 个项目是否存在