代码之家 › 专栏 › 技术社区 › James

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

react-redux reactjs javascript

James · 技术社区 · 6 年前

我想在单击“保存”按钮时呈现一个snackbar组件,方法是将showsnackbar状态设置为true,并在主呈现方法中执行一个简单的条件测试。反应101,没什么大不了的。这个snackbar组件在2s后自动隐藏。

问题是,我希望此状态重置回“假”,以便用户能够再次单击“保存”按钮并让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!" />
        )}
      ..
    )
  }

}

3 回复 | 直到 6 年前

jagadeesh kadavakollu 6 年前

将“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 />
        )}
    ..
    )
  }
}

Alex Antonov 6 年前

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

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

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

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

this.setState(newState, callbackFunction)

Limbo 6 年前

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

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

否则,您可以使用 componentDidUpdate :

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