Question

我想通过单击showSnackbar状态为true并在main渲染方法中进行简单的条件测试来渲染小吃栏组件。 React 101，没什么大不了的。快餐栏组件会在2秒后自动隐藏。

问题是我希望此状态重新设置为false，因此用户可以再次单击“保存”按钮，并再次渲染“ snackbar”组件，因为我希望他保持在同一表单上。我尝试了多种技术，但失败了。这是我正在使用的代码...也许我缺少一种简单的方法：

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

在回调函数中使用'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 2

React不实现DOM更改；它有时会等待。因此，当看到{ "set-trigger": { "name": "node_added_trigger_aa", "event": "nodeAdded", "waitFor": "1m", "preferredOperation": "ADDREPLICA", "enabled": true } }从一个值更改为另一个值并立即又变回来时，它显然不会触及DOM。

使用state，您将看到区别：

setTimeout

另一件事。 this.renderSnackbar(); setTimeout(() => { this.unrenderSnackbar(); }, 2000);不返回promise，如果您只想在更改应用于DOM之后仅运行某些代码，则传递回调函数：

this.setState

Answer 3

好吧，如果我对您的理解正确，那么有两种快速的解决方法。

如果MessageSnackbar是您自己的组件，则可以添加一些道具（例如onMount，将您将在其中执行this.setState({ showSnackbar: false }的某个函数传递给该道具，然后调用{{ 1}}在this.props.onMount()的{{1}}中。

否则，您可以使用MessageSnackbar：

componentDidMount

有条件地渲染React组件后重置状态

3 个答案: