Reactjs setState 问题答案

【问题标题】：Reactjs setState issueReactjs setState 问题
【发布时间】：2017-06-09 12:27:48
【问题描述】：

在反应中，我将数据存储在状态中。问题是我能够在函数中存储和读取状态。但是如果我尝试在 render() 方法中读取它，我将无法读取状态。下面是代码：

import Opt from './GenerateData.jsx';

constructor(props) {
    this.state = {
        options : ""
    }

    this.handleOptions = this.handleOptions.bind(this);
} 

handleOptions(params) {
    this.setState({
        options: params
    });

    // here it will print the state value
    console.log(this.state.options)
}

// 但这里不会打印出来..

render() {
    return (

        <Opt handleOptions={this.handleOptions.bind(this)} />
        ...
        ...
        <FilterOpts name="optionSelection" data={this.state.options} />
    )
}

在 GenerateData.jsx 中

class GenerateData extends React.Component {
    componentDidMount() {
        var d = [1,2,3,4];
        this.props.handleOptions(d);
    }

    render() {
        return (
            <div></div>
        )
    }
}

【问题讨论】：

理想情况下应该反过来
如果你通过构造函数提供状态，它会打印吗？
是的，如果我直接从构造函数发送它就可以打印
handleOptions 从未在此代码示例中调用过。
@B77 Idk。你告诉我们你想如何调用这个函数。最后是你的代码。事实是 handleOptions 在您提供的代码中永远不会被调用

标签： reactjs

【解决方案1】：

React setState() 是异步的。它不会立即改变 this.state 而是创建一个挂起的状态转换。

您可以尝试使用此代码记录更新后的状态。

handleOptions(params) {
    this.setState({
            options: params
        }, () => {console.log(this.state.options);}
    );     
}

【讨论】：