ReactJS Json Object 数组

Question

I am having an issue mapping some JSON:

https://environment.data.gov.uk/flood-monitoring/id/floodAreas/?county=Lincolnshire

Would really appreciate the help, thanks

I am using the following code to attempt to map the json object

await fetch('https://environment.data.gov.uk/flood-monitoring/id/floodAreas/?county=Lincolnshire')
  .then(res => res.json())
  .then(json => {
    this.setState({
      hasLoaded: true,
      weatherItems: json
    })
  });

static renderFloodTable(weatherItems) {
  return (
    <table class="centerTable" className='table table-striped' aria-labelledby="tabelLabel">
      <thead>
        <tr>    
          <th>County. (C)</th>           
        </tr>
      </thead>
      <tbody>
        {weatherItems.items.map(item =>
          <tr key={item.fwdCode}>                                          
            <td>{item.fwdCode}</td>
          </tr>
        )}
      </tbody>
    </table>
  );
}

Answer 1

i think the rendering in calling too soon so the weatherItems is'nt set yet. try this:

{weatherItems? weatherItems.items.map( //... etc... // ): null}

and btw, you should not use await And .then toogether... choose one...