Javascript JS状态意外更新

我对JS很陌生

以下是我正在处理的页面：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Plot from 'react-plotly.js';
import { fetchPosts, createPost } from '../actions/postActions'

import GroupedBarChart from '../containers/GroupedBarChart'

class Usage extends Component {
    state = {
        title: '',
        resp_data: [],
    }

    componentDidMount() {
        this.props.fetchPosts('/en/api/usage/')
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.posts.data) {
            this.setState({resp_data: nextProps.posts.data}, function () {
                console.log(this.state.resp_data);
            });
        }
        console.log(this.state.resp_data)
    }

    render() {
        const { title, resp_data } = this.state

        return (<div>
            <GroupedBarChart
                title={ title }
                data={ resp_data }
            />
        </div>);
    }
}

const mapStateToProps = state => ({
    posts: state.posts.items,
    newPost: state.posts.item
})

export default connect(mapStateToProps, { fetchPosts, createPost })(Usage)

此.state.resp_数据是空数组

两个console.log的输出如下所示：

[] # this is outside if
(2) [{…}, {…}] # this is inside if

有人能解释一下为什么会发生这种情况，我怎样才能克服它

提前感谢。
由于某种原因，当我将后端中的响应-
data=[]
更改为
data={}
时，它已经工作了。我仍然不明白为什么会这样。
首先摆脱
组件将接受props
方法，因为它不再被推荐使用，并且将在版本17时删除。您可以查看更多信息

其次签出，这样您将看到您的组件将在装载阶段使用初始数据进行渲染，因此我假设您最初没有
帖子。数据
，您将在
componentDidMount
获取它。因此，在获取数据后，将触发导致另一次渲染的
setState
（检查生命周期更新阶段，您将看到setState cause render）

在调用
setState
并希望看到一些数据后，您可以调用
console.log
，但如果查看数据的大小，您会发现它不一定可靠

setState（）并不总是立即更新组件。可能
批处理或将更新推迟到以后。这使得阅读成为一种状态
就在调用setState（）之后，这是一个潜在的陷阱

componenetDidMount（）中从未设置此组件的状态（默认值除外）。在this.props.fetchPosts（）完成后，您需要设置状态（{resp_data:responseData}），您的意思是我的nextrops.posts.data正确，但状态为空？是的
nextrops.posts.data
正确，然后它正确设置状态，但是一旦它离开if语句，状态就变了empty@VnC这就是你想要的吗？if（nextrops.posts.data）{this.setState（{resp_data:nextrops.posts.data}，函数（）{console.log（this.state.resp_data）；}）}console.log（this.state.resp_data）；第二个console.log不工作？在这里，this.setState第二个参数是异步回调函数。所以，在调用setState之后，您无法看到具有正确数据的状态，因为代码将继续，并且在setState回调之前第二个console.log将被激发。
[] # this is outside if
(2) [{…}, {…}] # this is inside if