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

(details.fullTextAnnotation.text)JSON中的from可能不可用或为null。这就是为什么只获得页码的原因。一次检查您的JSON。此外，如果您jsonData01在<Table>标签内部使用，这是引起警告的原因。如果要在表中显示数据，则将数据格式化为适当的行标签，即<tr></tr>标签。jsonData01 = jsonData01.responses.map((details,index) =>{&nbsp; &nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{details.fullTextAnnotation.text}</td> // check if this data is available&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>{details.context.pageNumber}</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp;)})

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));值与JavaScript中的引用