Question

我有一个供用户创建帖子的表单组件。当用户提交将调用API Post并显示警报组件（AC）时，AC将在2秒后消失。我使用redux来保存错误的全局状态，AC将基于错误的状态进行渲染

错误状态为：错误= {代码：201，文本：'CREATE SUCCESS'}，错误状态默认为：错误= {}）。

但是当我两次创建帖子时（创建帖子=> 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

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

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

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

道具更改后的setState

1 个答案: