React点击重量捕获按钮后组件状态重置问题求助

• 同步子组件与父组件props的依赖逻辑
  移除子组件本地useState后，不要给weight硬编码初始值0，直接从父组件传递的initialValues中读取对应字段，比如用props.initialValues.weight ?? 0作为默认值。确保父组件更新initialValues时，子组件能实时拿到最新的props值。

• 优化React.memo的比较逻辑
  既然组件叫MemoizedWeightCapture，确认已经用React.memo包裹。如果父组件的initialValues是对象，默认浅比较可能因为对象引用变化触发不必要重渲染，或者因为引用没变化导致子组件不更新。可以自定义比较函数，只校验weight字段：

  const MemoizedWeightCapture = React.memo((props) => {
    // 组件渲染逻辑
  }, (prevProps, nextProps) => {
    return prevProps.initialValues.weight === nextProps.initialValues.weight;
  });
  

  同时父组件更新initialValues时要做不可变更新，比如：

  setInitialValues(prev => ({ ...prev, weight: newWeight }));
  

• 完全将weight状态托管到父组件
  子组件只负责触发更新和展示，不再维护本地状态：
  父组件代码：

  const [initialValues, setInitialValues] = useState({ weight: 0, /* 其他字段 */ });
  const updateWeight = (newWeight) => {
    setInitialValues(prev => ({ ...prev, weight: newWeight }));
  };
  
  // 传递给子组件
  <MemoizedWeightCapture 
    currentWeight={initialValues.weight}
    onUpdateWeight={updateWeight}
  />
  

  子组件代码：

  const MemoizedWeightCapture = ({ currentWeight, onUpdateWeight }) => {
    const handleCapture = () => {
      // 获取用户输入的重量值，比如从DevExtreme组件中取
      const inputWeight = /* 输入值 */;
      onUpdateWeight(inputWeight);
    };
  
    return (
      <>
        <DxNumberBox value={currentWeight} />
        <button onClick={handleCapture}>Capture Weight</button>
      </>
    );
  };
  

• 检查DevExtreme组件的绑定正确性
  确保DevExtreme输入组件的value绑定到父组件传递的currentWeight，onValueChanged回调正确触发父组件的状态更新，避免组件内部维护独立状态导致的不同步。

• 排查组件key的稳定性
  确认父组件渲染MemoizedWeightCapture时使用的key是稳定值，不要用每次渲染都变化的内容（比如Date.now()），否则React会销毁重建子组件，导致状态重置。

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