ReactJS不使用&&显示数据

Question

我正在编写一个代码，该代码将从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

Answer 1

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>
     )
})

Answer 2

您的错误日志表明您的代码片段运行正常（检查日志）。

您的错误日志显示您的<div>中有一个<table>（这是XML的“确定”，但React认为它是HTML的DOM违规）。

我在您的代码中看到另一个小错误：

let jsonData01 = data01;
jsonData01.responses.map((details,index) =>{ return jsonData01 = ((details.fullTextAnnotation.text) && (details.context.pageNumber));

更改为

let jsonData01 = data01;
jsonData01 = jsonData01.responses.map((details,index) =>{ return jsonData01 = ((details.fullTextAnnotation.text) && (details.context.pageNumber));

Values vs. References in JavaScript