使用本地和 redux 状态响应受控输入组件，如何管理

如何解决使用本地和 redux 状态响应受控输入组件，如何管理

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

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 再次被触发 - 再次更新状态。

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

正确的流程是什么？