Question

任何线索为何在以下情况下getDerivedStateFromProps不会将state设置为error.msg？我想要的是我可以像这样使用警报组件，并在MyError中显示和隐藏它。我坚持让setTimeout正常工作。

export default class MyError extends Component {
  constructor(props) {
    super(props)
    this.state = {
      error: props.error
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.error.msg !== prevState.error.msg) {
      console.log('compare state with props')
      setTimeout(() => {
        console.log('do something')
        return {
          error: {msg: ''}
        }
      }, nextProps.error.timeout)
    }

    return null
  }

  render() {
    return <div>{this.props.error.msg}</div>;
  }
}

https://codesandbox.io/s/myk9vklq2y

Answer 1

setTimeout是异步的，并且其回调的返回值被丢弃。您的getDerivedStateFromProps始终返回null，因此不会更新（null表示什么也不更新）。

带有setTimeout的getDerivedStateFromProps更改对象状态失败

1 个答案: