Сбросить состояние после условного рендеринга компонента React

Question

Я хочу визуализировать компонент снэк-бара при нажатии на кнопку сохранения, установив для состояния showSnackbar значение true и выполнив простой условный тест в основном методе рендеринга.Реагируйте 101, не важно.Этот компонент панели закусок автоматически скрывается через 2 с.

Проблема состоит в том, что я хочу, чтобы это состояние вернулось к значению false, чтобы пользователь мог снова нажать кнопку «Сохранить» и снова получить компонент панели закусок для рендеринга, поскольку я хочу егооставаться в той же форме.Я попробовал несколько методов, но потерпел неудачу.Вот код, который я использую ... возможно, я упускаю тривиальный способ:

class MyForm extends Component {
  state = {
    showSnackbar: false
  };
..
  saveChanges = async () => {
    // this technique actually toggles the states in sequence successfully
    // but I guess since it's super fast, React is not able to render the
    // snackbar
    await this.renderSnackbar();
    await this.unrenderSnackbar();
  };

  renderSnackbar = async () => {
    console.log("render"); // This is being displayed in console
    await this.setState({ showSnackbar: true });
  };

  unrenderSnackbar = async () => {
    console.log("unrender"); // This is being displayed in console
    await this.setState({ showSnackbar: false });
  };

  ..
  ..
  render() {
    return (
      ..
      {this.state.showSnackbar && (
          <MessageSnackbar message="Saved successfully!" />
        )}
      ..
    )
  }

}

Answer 1

Что ж, если я вас правильно понял, то есть два быстрых обходных пути.

Если компонент MessageSnackbar является вашим собственным, то вы можете добавить некоторую опору (например, onMount, перейти к этой опорефункция, в которой вы будете выполнять this.setState({ showSnackbar: false }, а затем вызывать this.props.onMount() в MessageSnackbar 's componentDidMount.

В противном случае вы можете использовать componentDidUpdate:

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

Answer 2

Используйте '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 />
        )}
    ..
    )
  }
}

Answer 3

React не реализует изменения DOM;это ждет иногда.Поэтому, когда он видит изменение state от одного значения к другому и немедленное изменение обратно, он явно не касается DOM.

Используйте setTimeout, и вы увидите разницу:

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

Другое дело.this.setState не возвращает обещание, если вы хотите запустить какой-то код только после применения изменения к DOM, передайте функцию обратного вызова:

this.setState(newState, callbackFunction)