无法调用 JSON 对象的第一个元素

Question

我正在尝试从data[] 访问第一个对象。然后，使用Object.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

第一次尝试访问data[0]，还是空的：

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

而const data = this.state.post; 表示data[0] 未定义。

只有在组件被挂载并且状态设置正确后，data[0] 才被定义（或不​​被定义，取决于 API 返回的内容）。

Answer 2

我找到了一种工作方式，方法是添加另一个“then”，这样它就可以在“posts”状态设置后立即设置“keys”状态。但我想知道是否有另一种方法可以使它更优雅。感谢您尝试提供帮助。

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