Question

我正在使用其他人编写的非常复杂的反应应用程序。我想在消息线程的末尾为表单字段设置默认值。

在加载所有数据之前，可能会多次调用子渲染函数。我的表单组件的默认值取决于线程中的最后一个值。

因此我在构造函数中设置了replyType，并在getReplyType中有一些逻辑，根据当前的Props计算：

  constructor(props) {
    super(props);

    this.state = {
      replyType: this.getReplyType(),
    };
  }

如果我们从父级获取所有数据之前需要3次，那么这将无法呈现正确的值。所以我使用这样的调用来更新表单中的值：

  componentWillReceiveProps(nextProps) {
    this.setState({
      replyType: this.getReplyType(nextProps),
    });
  }

这让我得到了我想要的初始状态。问题是每次调用componentWillReceiveProps，包括在用户手动选择之后。它不会覆盖选择文本，但会破坏CSS的呈现方式......

changeReplyType = ({ value }) => {
  this.setState({
    replyType: value,
  });
}

问题：如果事件处理程序触发了更改，是否有办法阻止componentWillReceiveProps运行？

Answer 1

我必须在componentWillReceiveProps和新的prop

中使用if语句

  componentWillReceiveProps(nextProps) {
    // setState when props change from pending to not pending
    // prevents function from being called when changeReplyType updates state
    if (!nextProps.isPending && this.props.isPending) {
      this.setState({
        replyType: this.getReplyType(nextProps),
      });
    }
  }

管理componentwillrecieveprops和onChange函数之间的冲突

1 个答案: