时间戳

首页 > 解决方案 > ReactJS 不使用 && 显示数据

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

问题描述

我正在编写一个代码，它将从 JSON 文件读取数据到 reactJS 文件。这个 JSON 文件包含多个页面，从“上下文”开始，然后是“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

标签： javascriptjsonreactjsweb

解决方案

JSON 中的(details.fullTextAnnotation.text)可能不可用或为空。这就是为什么你只得到页码。检查您的 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>
     )
})

推荐阅读