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) =>{

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

值与JavaScript中的引用