javascript - props 改变后的 setState

Question

我有一个用于用户创建帖子的表单组件。当用户提交时会调用 API Post 并显示 Alert Component (AC)，AC 将在 2s 后消失。我使用 redux 来保存错误全局状态，AC 将呈现基于错误状态

error state is: error = { code: 201, text: 'CREATE SUCCESS' }, error state default: error = {} ).

但是当我创建帖子两次时(创建帖子 => AC 显示并在 2 秒后消失 => 然后继续创建帖子 => AC 不显示)AC 没有像我想要的那样显示。我希望每次创建后 AC 时都会显示然后消失。感谢您的帮助，抱歉我的英语不好。

我知道我何时创建 Post。 nextProps.error.code = 201 和 nextState.error.code = 201，所以它返回 null。我不知道如何解决这个问题。

警报组件看起来像 - 我与 Reactstrap 一起使用:

class Alarm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      alarm: this.props.alarm, // props from redux 
      isOpen: false,
    };
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    if(nextProps.alarm.code !== nextState.alarm.code) {
      return {
        alarm: nextProps.alarm,
        isOpen: true,
      }
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState) {
    setTimeout(() => this.setState({ isOpen: false } ),2000);
  }

  render() {
    const { alarm, isOpen } = this.state;
    const color = alarm.isError ? 'danger' : 'success';
    return (
      <div className="s-stream-alert">
        <div className="s-stream-alert__wrapper">
          <Alert color={color} isOpen={isOpen}>
            { alarm && alarm.code !== 0 && alarm.code }
          </Alert>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  alarm: state.alarmReducer
});

export default connect(mapStateToProps)(Alarm);

主要组件看起来像:

<div>
   <FormComponent />
   <Aler />
</div>

Answer 1

你说第二次创建post时nextProps.error.code = 201和nextState.error.code = 201，所以返回null。除了存储错误代码外，您还可以为每次触发错误时存储一个唯一 ID。例如。随机生成的数字/字符串 ID，例如“e5nxgbjbm”或类似的东西。然后您可以检查 ID 是否相等并在 getDerivedStateFromProps 中相应地返回。这将解决问题。

希望我正确理解了您的问题。

不过，我还想指出构造函数中设置状态 alarm: this.props.alarm 的那一行。这不是必需的，您可以使用 this.props.alarm 进行所有检查。你不需要这个作为状态。你可以随处使用 Prop 。没有必要将新的状态属性设置为警报，因为您没有以任何方式更新它。当 Prop 改变时，组件将以任何一种方式重新渲染。