this.setState()工作不正常-react.js

this.setState 接受第二个参数作为 callback state

componentWillMount() {
        let dID=this.props.match.params.datumID;
         console.log(dID);
        this.setState({datumID: dID},()=>console.log(this.state.datumID)); 
    }

旁注:将代码移到 componentDidMount .

componentWillMount()在装载发生之前立即被调用。它 在render()之前调用,因此在此方法中设置状态 不会触发重新渲染。避免引入任何副作用或

将setState()视为更新组件的请求,而不是立即命令。为了获得更好的感知性能,React可能会延迟它,然后在一次过程中更新几个组件。React不保证状态更改立即应用。

如果需要根据前一个状态设置状态, 阅读下面的updater参数。

    this.setState((prevState, props) => {
       return {datumID: props.match.params.datumID};
    });

因为SetState()是一个异步函数,所以使用下面的代码

componentWillMount() {
let dID=this.props.match.params.datumID;
this.setState({datumID: dID},
function(){
console.log(this.state.datumID)});
console.log(dID);  
}

setState()是一个异步函数,它正在更新状态,javascript是单线程语言,它将执行下一行代码。所以如果你想看到状态值集,你必须这样做。

componentDidMount=()=> {
        let dID=this.props.match.params.datumID;
        this.setState({
               datumID: dID
        },()=>{  
          console.log(dID);
          console.log(this.state.datumID);
       });  
    }

this.setState 是一个异步函数,它需要时间并传递新分配的 状态值覆盖React的所有生命周期函数,以便更新状态并触发组件的重新呈现。第一个控制台注销分配给set state的值,下一个控制台注销当前驻留在该状态中的值 this.state.datumID . 如果需要在设置状态后执行操作,可以传递在成功更新状态后触发的回调。

this.setState({datumID: dID}, () => console.log(this.state.datumID) ); // this will log the updated value

我想指出的另一件事是 componentWillMount componentDidMount 也可以在中执行预渲染任务 constructor 你的类组件。