Question

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

2019-10-31

84

javascript json reactjs api

我尝试从 data[] 访问第一个对象。然后，使用 Object.keys() 获取键，但它给出了此错误：

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

我需要输出为键的数组。

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