首页 文章

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

提问于
浏览 次
0

我想在单击保存按钮时渲染一个snackbar组件，方法是将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!" />
        )}
      ..
    )
  }

}
javascript reactjs react-redux

3 回答

  • 0

    使用带有回调函数的'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 />
        )}
    ..
    )
  }
}
    回复于
  • 2

    React没有实现DOM更改;它有时会等待 . 因此，当它看到 state 从一个值更改为另一个值并立即更改回来时，它显然不会触及DOM .

    使用 setTimeout 你会看到差异：

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

    另一件事 . this.setState 不返回promise，如果你只想运行一些代码 after 更改应用于DOM，传递回调函数：

    this.setState(newState, callbackFunction)
    回复于
  • 0

    好吧，如果我理解你，那么有两个快速的解决方法 .

    如果 MessageSnackbar 组件是你自己的，那么你可以添加一些道具（例如 onMount ，向你的道具传递一些你将做 this.setState({ showSnackbar: false } 的函数，然后在 MessageSnackbar 的 componentDidMount 中调用 this.props.onMount() .

    否则，您可以使用 componentDidUpdate ：

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

相关问题