JS状态意外更新

Question

我是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)

问题在于，状态在某个时候出乎意料。

因此，在componentWillReceiveProps中，setState调用后立即有一个console.log，并且该控制台的输出。log正是我所期望的。但是，如果我在if语句之后立即打印状态：

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

this.state.resp_data是一个空数组。

两个控制台的输出看起来像：

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

有人可以向我解释为什么会发生这种情况，以及我该如何克服它？

预先感谢。

Answer 1

首先要摆脱componentWillReceiveProps方法，因为它不建议再使用，并且可以在版本17中删除。

其次结帐React Lifecyles，因此您将看到您的组件在安装阶段的初始数据呈现，因此我假设您首先没有posts.data，并且在componentDidMount上获取它。因此，在获取数据后，您触发setState，这会导致另一个渲染(检查生命周期更新阶段，您会看到setState CADY CADED渲染(。

拨打setState并期望查看一些数据后打电话给console.log，但是如果您查看其文档，您会发现它不能保证。

setState((并不总是立即更新组件。它可能 批量或将更新推迟到以后。这使得读 在调用setState((为潜在的陷阱之后。

Answer 2

出于某种原因，当我将后端的响应更改为data = []中的响应为data = {}时，它已经起作用。我仍然对为什么会这样感到困惑。