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

Question

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

"TypeError:无法将未定义或null转换为对象"。

我需要输出为键的数组。

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

而CCD_ 4表示CCD_。

只有在组件安装好并且状态设置正确之后，才能定义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>
)
}