0

我有一个受控输入组件，对传递给本地和 redux 状态的值进行了一些操作。目前，在onchange事件中，我调用了一个“清理”值的函数，然后将其发送到本地状态并将其发送到redux 状态，如以下代码所示。

componentDidUpdate(prevProps: Readonly<Props>): void {

  if (this.props.value !== prevProps.value) {
      this.updateInputValue(this.props.value);
  }
}

handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {
    const value = e.target.value || '';

    if (value === '' || NUMBER_REGEX.test(value)) {
      this.updateInputValue(value);
      this.props.onChange(e);
    }
  };

  updateInputValue = (inputValue: string): void => this.setState({ inputValue });

  onChangeInputField = (e: any): void => {
    const { alphanumeric, uppercase } = this.props;
   

    if (trim) e.target.value = e.target.value.replace(/\s/g, '');

    if (alphanumeric && ALPHANUMERIC_REGEXP.test(e.target.value)) return;

    if (uppercase) e.target.value = e.target.value.toUpperCase();

    this.updateInputValue(e.target.value);

    this.props.onChange(e);
  };

我在这里担心的是：

onChangeInputField 触发器：

  • updateInputValue 更新状态值。
  • props.onChange更新 redux 存储值

因为更新了一些东西，现在我们调用 componentDidUpdate ：

  • 检查收到的道具是否匹配，因为我们使用 props.onChange 更新了存储中的值，我们正在接收新的道具值
  • 因为 updateInputValue 再次被触发 - 它再次更新状态。

我在这里看到的问题是首先我们有多个事实来源其次我多次重新渲染元素。

什么是正确的流程？

4

0 回答 0