Question

我正在尝试使用DidMount中的localStorage值更新状态，但未更新：

type Props = {
};

type State = {
    id_evaluation: string,
};

class Evaluation extends Component < Props, State > {
    state = {
        id_evaluation: '',
    }

    componentDidMount() {
        const id_eval = getEvaluation();
        console.log('1 - ', id_eval)

        this.setState({
            id_evaluation: '1',
        });

        console.log('2 - ', this.state.id_evaluation)

在第一个console.log中，我具有值1，在第二个console.log中，它保持为空，不会更新状态。

Answer 1

那是因为您在状态更新之前调用console.log。试试这个：

this.setState({
  id_evaluation: '1',
}, () => {
  console.log('2 - ', this.state.id_evaluation);
});

查看此线程：

Can I execute a function after setState is finished updating?

Answer 2

setState异步工作，因此将console.log作为callback传递以获取更新状态。

this.setState({ id_evaluation: '1'}, () => console.log('2- ', this.state.id_evaluation));

当用作代码时，console.log('2 - ', this.state.id_evaluation)会打印以前的状态而不是更新的状态。

Answer 3

this.setState是一个异步函数。

 this.setState({
        id_evaluation: '1',
 }, () => console.log('2 - ', this.state.id_evaluation));

回调函数可以解决您的问题。

反应-setState不更新值

3 个答案: