javascript - ReactJS 不使用 && 显示数据

Question

我正在编写一个代码，它将从 JSON 文件读取数据到reactJS 文件。此 JSON 文件包含多个页面，这些页面从“context”开始，然后是“pageNumber”。当我不包括

&& (details.context.pageNumber))

输出将仅显示最新页面的数据内容，例如，如果 JSON 文件中有 20 页文件，它将显示第 20 页的数据。

但是当我输入上面的源代码时，它应该显示所有页面内容，但它不显示内容，而是显示此错误。

这里是源代码:

componentDidMount(){
     let jsonData01 = data01
     jsonData01.responses.map((details,index) =>{
     return jsonData01 = ((details.fullTextAnnotation.text) && (details.context.pageNumber));
     })
console.log(`File Content JSON:\n`+ jsonData01);
}

这是错误输出:

大家有什么想法或解决方案吗？

我的 JSON 文件可以在这里看到:https://drive.google.com/file/d/15tbyQLjylsefeXxEAmU4HmNn9OHyZxLA/view?usp=sharing

Answer 1

(details.fullTextAnnotation.text)您的 JSON 中的数据可能不可用或为空。这就是为什么您只获得页码。检查一次您的 JSON。

此外，如果您使用 jsonData01 <Table>里面标签，这是警告的原因。如果您想在表中显示数据，请将数据格式化为适当的行标记，即 <tr></tr>标签。

jsonData01 = jsonData01.responses.map((details,index) =>{
     return (
        <tr>
          <td>{details.fullTextAnnotation.text}</td> // check if this data is available
          <td>{details.context.pageNumber}</td>
        </tr>
     )
})