Question

我试图获取一个json并将其包含在我的状态中。

奇怪的是，当我在ajax内axios发出componentDidMount请求而我console.log状态更新了渲染方法时，它返回一个空对象，然后是状态更新。

我只想删除这个空对象。我该怎么办？

以下是代码：

 componentDidMount() {
    axios({
        method: 'get',
        baseURL: '/url',
        headers: {
            "foo": "bar",
            "key": "tata"
        },
        timeout: 3000,
        responseType: 'json'
    }).then(response => {
        const posts = response.data.blocks.map(post => {
            if (typeof post.description !== 'undefined' && typeof post.description !== '') {
                return post;
            } else {
                return;
            }
        });
        this.setState({posts});
    });
}

Answer 1

在您的render方法之后调用

componentDidMount，因此您最初在render方法中获得的是您在构造函数中设置的初始状态。由于post应该是一个数组，你可以在构造函数中将它初始化为一个空数组，如

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

在componentDidMount中的请求完成后，状态发布设置为组件将重新呈现，因此第二次您将看到正确的数据。

检查这个答案

Use componentWillMount or componentDidMount lifecycle functions for async request in React

componentDidMount返回空对象对象axios

1 个答案: