响应组件的条件呈现后重置状态

将“setState”与回调函数一起使用,该函数可以还原状态。

class MyForm extends Component {
  state = {
    showSnackbar: false,
    message: ''
  };

  saveChanges = () => {
    ..
    this.setState({ showSnackbar: true, message: 'Saved successfully' }, () => {
      setTimeout(() => { this.setState({ showSnackbar: false }) }, 2000);
    })
  };

  render() {
    const { showSnackbar, message } = this.state;

    return (
      { showSnackbar && (
          <MessageSnackbar message />
        )}
    ..
    )
  }
}

react不实现DOM更改;它有时会等待。所以,当它看到 state 从一个值切换到另一个值,然后立即切换回,它显然不会接触到DOM。

使用 setTimeout 你会看到不同之处:

this.renderSnackbar();
setTimeout(() => { this.unrenderSnackbar(); }, 2000);

另一件事。 this.setState 如果只想运行一些代码,则不返回Promise 之后 更改应用于dom,传递回调函数:

this.setState(newState, callbackFunction)

好吧,如果我正确理解你,那么有两个快速的解决方法。

如果 MessageSnackbar 组件是您自己的,然后您可以添加一些道具(例如 onMount ,传递给这个属性一些您将要执行的功能 this.setState({ showSnackbar: false } ,然后打电话 this.props.onMount() 在里面 消息条 的 componentDidMount .

否则,您可以使用 componentDidUpdate :

componentDidMount(prevProps, prevState) {
    if (this.state.showSnackbar && !prevState.showSnackbar) {
        this.setState({ showSnackbar: false })
    }
}