React中父组件useState更新后避免重复传递Props给子组件

你的核心问题是：输入框作为受控组件，只绑定了父组件的初始默认值状态，没有维护实时输入值的状态。当父组件因isDirty更新重渲染时，子组件拿到的配置对象里的value还是初始的defaultValue，导致输入框被强制重置回默认值。

下面给出两种针对性的解决方案：

方案1：维护输入框实时值状态（推荐，符合React受控组件规范） #

让父组件同时维护初始默认值和输入框的实时值，用户输入时同步更新实时值状态，确保重渲染时子组件拿到的是最新输入值。

修改后的父组件代码 #

export default function ParentComponent() {
  const [isDirty, setIsDirty] = useState(false);
  const [defaultValue, setDefaultValue] = useState('');
  // 新增：维护输入框的实时值
  const [inputValue, setInputValue] = useState('');

  // 用useMemo缓存配置对象，避免每次渲染新建（优化性能，可选）
  const myInputFieldConfiguration = useMemo(() => ({
    field: 'myfield1',
    type: 'text',
    isDisabled: false,
    value: inputValue
  }), [inputValue]);

  useEffect(() => {
    getDefaultData();
  }, []);

  const getDefaultData = async () => {
    const defaultDataResponse = await api.getDefaultData();
    setDefaultValue(defaultDataResponse);
    // 初始化输入框值
    setInputValue(defaultDataResponse);
  };

  // 新增：处理输入框值更新的回调
  const handleInputChange = (newValue) => {
    setInputValue(newValue);
    // 对比实时值和默认值，自动更新isDirty状态
    setIsDirty(newValue !== defaultValue);
  };

  return (
    <>
      <ChildComponent
        inputFieldConfiguration={myInputFieldConfiguration}
        onInputChange={handleInputChange}
      />
    </>
  );
}

修改后的子组件代码 #

export default function ChildComponent(props) {
  function handleChange(event) {
    const newValue = event.target.value;
    // 通知父组件更新实时值
    props.onInputChange(newValue);
  }

  return (
    <>
      <input
        type={props.inputFieldConfiguration.type}
        disabled={props.inputFieldConfiguration.isDisabled}
        value={props.inputFieldConfiguration.value}
        onChange={handleChange}
      />
    </>
  );
}

方案优势 #

• 输入框的状态完全由父组件控制，符合React单向数据流的设计理念
• isDirty的判断逻辑更清晰，自动根据输入值和默认值的差异更新
• 用useMemo缓存配置对象，减少子组件不必要的重渲染

方案2：改为非受控组件（适合简单场景） #

如果不需要父组件同步控制输入值，可以让子组件自身管理输入状态，仅用defaultValue初始化，避免强制重置。

修改后的子组件代码 #

import { useRef } from 'react';

export default function ChildComponent(props) {
  const inputRef = useRef(null);

  function handleChange(event) {
    if (event.target.value !== props.inputFieldConfiguration.value) {
      props.onIsDirty(true);
    }
  }

  return (
    <>
      <input
        ref={inputRef}
        type={props.inputFieldConfiguration.type}
        disabled={props.inputFieldConfiguration.isDisabled}
        defaultValue={props.inputFieldConfiguration.value} // 替换为defaultValue
        onChange={handleChange}
      />
    </>
  );
}

注意事项 #

• 非受控组件的值由DOM自身维护，父组件无法直接获取或修改输入值
• 仅适合不需要同步父状态的简单输入场景

内容的提问来源于stack exchange，提问作者Trispo