how to access obj from json in React?

Question

Api Respose :-

 [
      {
        "System Name": "Name1",
        "Primary Sensor": "WWWW",
        "Mean Wind Speed": "6.23 m/s",
        "Status": 1,
        "mws_number": 44,
        "DRR (%)": "100",
        "drr_number": 100
      },
      {
        "System Name": "Name 2",
        "Primary Sensor": "SSSS",
        "Mean Wind Speed": "4.2 m/s",
        "Status": 2,
        "mws_number": 6,
        "DRR (%)": "100",
        "drr_number": 100
      }
    ]

My Code ->

    class Home extends Component {
    state = {
          items:[],
            isLoading:false
            }
     componentDidMount() {
    // api
            fetch('http://api.url', {
              method: 'POST',
              body: 
               JSON.stringify({"Authentication":'token'})
             }).then(data => data.json() )
             .then(res =>{
            this.setState({isLoading:true,
            items:res,}
    )
          });
    }
    render() {
    return (
    <>
     {console.log(this.state.items[0])} // getting o/p - first obj of array
     {console.log(this.state.items[0].Status)} // getting Error undef Status
     {console.log(this.state.items.Status[0])} // same error undef status
    </>
)
export def ....

This is my complete piece of code... I can't add api url as it is not public api :( I want to access this data inside of the array =>(Status, System Name, etc) how can i fetch this !!

Answer 1

Here, console.log(this.state.items[0]); is getting called two times;
- When the page first loads and API request is not finished.
- After the API request finishes and you call this.setState

Solution would be to check that items' length is greater than 0 before trying to use it. Try changing console.log(this.state.items[0]); to this:

if (this.state.items.length > 0) { console.log(this.state.items[0].Status); }

Answer 2

我建议你使用 componentWillMount() 而不是 componentDidMount() 因为 componentWillMount() 发生在渲染之前，而 componentDidMount() 发生在第一次渲染之后。可能会有帮助。