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)

这样做的问题是状态在某些时候会意外更改。

因此，在componentWillReceiveProps调用后紧接着有一个console.log，此console.log的输出正是我所期望的。但是，如果我在if语句后立即打印状态：

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

setState是一个空数组。

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

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

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

提前致谢。

最佳答案

首先摆脱componentWillReceiveProps方法，因为不建议再使用它，它将在版本17中删除。您可以检查here以获取更多信息。

其次，检出react lifecyles，这样您将看到您的组件将在安装阶段使用初始数据进行渲染，因此，我假设您最初没有posts.data，并且在componentDidMount处进行了获取。因此，在获取数据后，触发setState会导致另一个渲染（检查生命周期更新阶段，您将看到setState导致渲染）。

您在调用console.log并希望看到一些数据后调用setState，但是如果查看它的documentation，则将无法保证。


  setState（）并不总是立即更新组件。它可能
  批处理或将更新推迟到以后。这使得阅读this.state
  在调用setState（）之后立即发生潜在的陷阱。