ReactJS不使用&&显示数据

Question

I am writing a code that will read data from JSON file towards reactJS file. This JSON file contain multiple pages which starts at "context" then "pageNumber". When i do not include

&& (details.context.pageNumber))

The output will then show only the data content from the latest page for example if there is 20 pages of file in the JSON file it will show the data from the 20th page.

But when i put in the source code above, It supposed to show all the pages content but it does not show content and it shows this error instead.

Here are the source code :

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

Here are the error Output :

Any ideas or solutions guys ?

My JSON file can be seen here : https://drive.google.com/file/d/15tbyQLjylsefeXxEAmU4HmNn9OHyZxLA/view?usp=sharing

Answer 1

The (details.fullTextAnnotation.text) from your JSON might be not available or null. That's why you are getting only page number. Check your JSON once.

Further if you are using jsonData01 inside of <Table> tag, this is the cause of warning. If you want to show data in table then format your data to appropriate row tag ie <tr></tr> tag.

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

Your error logs indicate that your snippet worked fine (check logs).

Your error logs say you've got a <div> inside your <table> (which is as XML "ok" but React considers it as DOM violation for HTML).

I see another small mistake in your code:

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

Change to

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

Values vs. References in JavaScript