javascript - 受控状态设置为 false 后，Material-UI Snackbar 不会关闭

Question

我有一个 Snackbar 组件，通过检查 redux 状态来控制。 onRequestClose() 尝试禁用点击关闭功能。我遇到的问题是，当第一次将 prop snackbarWarningOpen 设置为 false 时， snackbar 不会关闭。

这是我的代码以及我如何调用 Snackbar 组件。 snackbarWarningOpen 是一个作为 prop 传入的 bool 变量，它可以准确地从 true 适本地切换到 false。

<Snackbar
      open={snackbarWarningOpen}
      message={
        <span>
          <i className="fa fa-exclamation-triangle ble-warning" aria-hidden="true" />
          <span> {snackbarWarningMessage}</span>
        </span>
      }
      style={styles.warningSnackbar}
      bodyStyle={styles.warningSnackbarBody}
      onRequestClose={(reason) => {
        if (reason === 'clickaway') {
          return;
        }
      }}
    />

我追踪到问题出在componentWillReceiveProps中的setTimeout()函数，它上次总是将打开状态设置为true即使我传递的 prop 为 false，它也会运行。奇怪的是，IF 语句的条件返回 false，但 setTimeout() 函数仍然运行。将 Prop 设置为 false 后，点击事件将关闭 snackbar ，但我试图让它自行关闭。我的实现是否不正确，或者这是 snackbar 组件中的错误？

这是来自 Material-UI 源代码，timerOneAtTheTimeId 中的 setState 是在我将 open 属性传递给组件后 open 切换回 true 的位置.

componentWillReceiveProps(nextProps) {
if (this.props.open && nextProps.open &&
    (nextProps.message !== this.props.message || nextProps.action !== this.props.action)) {
  this.setState({
    open: false,
  });

  clearTimeout(this.timerOneAtTheTimeId);
  this.timerOneAtTheTimeId = setTimeout(() => {
    this.setState({
      message: nextProps.message,
      action: nextProps.action,
      open: true,
    });
  }, 400);
} else {
  const open = nextProps.open;

  this.setState({
    open: open !== null ? open : this.state.open,
    message: nextProps.message,
    action: nextProps.action,
  });
}

Answer 1

这个问题已经有一年多了，并且没有指定 Material UI 的版本，但是无论谁遇到这个问题:现在都可以在 Material UI v1.x 版本中轻松解决:

scnackBar 组件有一个 autoHideDuration 属性，可以设置它来实现您所需要的:

<Snackbar
    open={this.state.open}
    onClose={this.handleClose}
    autoHideDuration={6000}
/>

不过，“点击后关闭”仍将处于事件状态。

请务必查看the snackbar documentation获取更新信息。