Question

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

我只是尝试使用setState()方法。

但是问题是它不起作用。

这是我得到的输出：

First console.log() : 66
Second console.log(): null

Answer 1

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

如果您需要根据先前的状态来设置状态，在下面阅读有关updater参数的信息。

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

Answer 2

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（）之前调用，因此在此方法中设置状态不会触发重新渲染。避免引入任何副作用或订阅。

Answer 3

因为SetState（）是一个异步函数，所以使用下面的代码

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

，如果可能的话，请尽量避免使用compenentWillMount，因为它将很快被弃用

Answer 4

this.setState是一个异步函数，它需要时间并传递新分配的在React的所有生命周期函数中使用state值，以更新状态并触发组件的重新渲染。您的第一个控制台注销分配给设置状态的值，而下一个控制台注销当前处于状态this.state.datumID的值。如果您需要在设置状态后执行操作，则可以传递在状态成功更新后触发的回调。

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

我要指出的另一件事是componentWillMount在将来的版本中将无法使用。如果要在渲染DOM之后执行某些操作，请使用componentDidMount，或者可以在类组件的constructor中执行预渲染任务。

Answer 5

setState（）是一个异步函数，它正在更新状态，而javascript是单线程语言，它将执行下一行代码。因此，如果要查看状态值集，则必须执行以下操作。

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

我也建议您使用componentDidMount，因为willMount由于已弃用，将来将无法使用

this.setState（）不能正常工作-react.js

5 个答案: