无法调用 JSON object 的第一个元素

Question

I'm trying to access the first object from data[] . Then, grab the keys using Object.keys() but it gives me this error:

"TypeError: Cannot convert undefined or null to object".

I need the output to be an array of the keys.

import React, { Component } from 'react';

class CodecChart extends Component {

  constructor(props) {
    super(props);
    this.state = {
      post: [],
      isLoaded: false,

    }
  }

  componentDidMount() {
    const url = 'https://jsonplaceholder.typicode.com/users';
    fetch(url)
      .then(result => result.json())
      .then(post => {this.setState({ post: post })
      })
  }

  render() {
    const data = this.state.post;

// cannot reach the first object of data[]
    var keys = Object.keys(data[0]);


    return (
      <div>

//output should be an array of the keys
        <h5>{keys}</h5>

      </div>
    )
  }
}

export default CodecChart;

Answer 1

The first time you try to access data[0] , it's still empty:

this.state = {
  post: [],
  isLoaded: false,
}

and const data = this.state.post; means that data[0] is undefined.

it's only after the component is mounted, and the state is set correctly that data[0] is defined (or not, depending on what the API returns).

Answer 2

The best approach to do this in React lifecycle is to place your code inside componentWillMount method instead of componentDidMount .

componentDidMount() {
    const url = 'https://jsonplaceholder.typicode.com/users';
    fetch(url)
      .then(result => result.json())
      .then(post => {this.setState({ post: post })
    });
}

Remember the React lifecycle:

• constructor
• componentWillMount
• render
• componentDidMount

The difference is that componentDidMount executes after render . Where actually you are trying to render an empty variable.

Most of the time, when you want to render information from a server, you must first obtain the data in componentWillMount and then you can render it.

Rendering arrays in React

You also have another mistake in your code, you are trying to render an Array, which actually React can't easily do.

Object.keys() returns an array of the object keys, so if you want to render all of them, you should use map function for arrays:

render() {
    const data = this.state.post;
    var keys = Object.keys(data[0]);
    return (
      <div>
        {keys.map(e => (<h5>{e}</h5>) )}
      </div>
    );
}

Answer 3

I found a way for it to work by adding another "then" so it can set the "keys" state right after the "posts" state was set. But I wonder if there is another way to make it more elegant. Thank you for trying to help.

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      isLoaded: false,
      keys: []
    }
  }

  componentDidMount() {
    const url = 'https://jsonplaceholder.typicode.com/users';
    fetch(url)
      .then(result => result.json())
      .then(posts => {
        this.setState({ posts: posts })
      })
      .then(_ => { this.setState({ keys: Object.keys(this.state.posts[0]) }) })
  }

  render() {
    const keys = this.state.keys;

    return (
      <div>
        <h5>{keys}</h5>
      </div>
    )
  }