Question

我的代码有什么问题？我想根据持续时间清除错误味精。但这没有，我想知道是怎么回事。

export default class MyError extends Component {
  state = {
    error: ''
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if(nextProps.error.msg !== prevState.error.msg){
      return {
        error: nextProps.error
      }
    }
    return null
  }

  componentDidMount() {
    setTimeout(()=>{
      this.setState({
        error: {}
      })
    },this.state.error.duration)
  }

  render() {
    console.log(this.state)
    return <div>{this.state.error.msg}</div>
  }
}

Answer 1

设置初始持续时间

state = {
    error: {duration:1000}
  }

Answer 2

首先，您的状态对象是错误的，即您在渲染和componentDidMount中将 state.error 用作对象，但声明为字符串类型。

请查看以下示例以了解更多详细信息。

export default class MyError extends Component {
    state = {
        error: {
            duration: 10,
            msg: ""
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if (nextProps.error.msg !== prevState.error.msg) {
            return {
                error: nextProps.error
            }
        }
        return null
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState((state) => ({ error: { msg: null, duration: state.error.duration } }));
        }, this.state.error.duration)
    }

    render() {
        const {msg} = this.state.error;
        return <div> {msg} </div>
    }
}

setState在setTimeout之后触发以清除组件？

2 个答案: