React子组件props更新时，如何更新input的defaultValue？

1. 子组件里的useState(elData.label)只会在组件第一次挂载时执行初始化，后续父组件传过来的elData更新了，这个状态不会自动跟着变化。
2. 输入框使用的defaultValue是给非受控输入框设置初始值的属性，一旦输入框渲染完成，哪怕defaultValue的取值改变，输入框显示的内容也不会同步更新。

办法一：改成受控组件（更推荐） #

将输入框改为受控模式，用value绑定状态，同时通过useEffect监听elData.label的变化，同步更新状态值：

const ChildComponent = ({ elData }) => {
  const [testInput, setTestInput] = useState(elData.label);

  // 当elData的label变化时，同步更新输入框状态
  useEffect(() => {
    setTestInput(elData.label);
  }, [elData.label]);

  return (
    <input
      onChange={(e) => setTestInput(e.target?.value)}
      value={testInput}
    />
  );
};

办法二：用key强制子组件重新挂载 #

如果想保留非受控组件的写法，可以给子组件设置唯一的key，每次切换编辑项时，key变化会让React销毁旧的子组件实例，重新创建新的实例，这样初始化时就会使用新的elData.label：
修改父组件中渲染子组件的代码：

{showEdit && (
  <ChildComponent 
    key={currentElement.label}
    elData={currentElement} 
  />
)}

这样点击不同的列表项，子组件会重新挂载，输入框的defaultValue就会跟着更新为新的内容。

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