React 中 defaultValue 仅在组件首次挂载时生效，无法响应后续 props 变化；要实现动态更新，必须改用受控组件（value + onChange），而非依赖一次性设置的 defaultValue。
react 中 `defaultvalue` 仅在组件首次挂载时生效，无法响应后续 props 变化；要实现动态更新，必须改用受控组件（`value` + `onchange`），而非依赖一次性设置的 `defaultvalue`。
在构建表单组件（如创建/编辑共用的表单）时，一个常见误区是混用 defaultValue 和动态 props。正如示例所示：
<input type="date" defaultValue={values?.date ? values.date : '2023-11-20'} />该写法看似合理——当 values 存在时显示编辑数据，否则回退到默认日期。但问题在于：defaultValue 是 DOM 属性（attribute），仅在元素首次插入文档时被读取并初始化 <input> 的初始值；之后即使 values 发生变化、组件重新渲染，defaultValue 属性的变更不会同步到已存在的 input 元素的当前值（input.value）。浏览器原生行为决定了它“只认第一次”。
相比之下，value 属性（prop）会强制使输入框成为受控组件：React 持续接管其显示值，每次渲染都依据最新 value prop 更新 UI。因此，修复核心在于：
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
✅ 将 defaultValue 替换为 value
✅ 同时提供 onChange 处理函数，保持受控状态一致性（避免警告：“A component is changing an uncontrolled input to be controlled”）
修正后的 Child 组件如下：
function Child({ values, change }) {
// 管理本地状态，支持编辑时的实时输入
const [formData, setFormData] = useState({
name: values?.name || '',
date: values?.date || '2023-11-20',
});
// 同步外部 values 变更（例如编辑模式切换）
useEffect(() => {
if (values) {
setFormData(prev => ({
...prev,
name: values.name || '',
date: values.date || '2023-11-20',
}));
}
}, [values]);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({ ...prev, [name]: value }));
};
return (
<div className="container">
<button type="button" onClick={change}>clickMe</button>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
<input
type="date"
name="date"
value={formData.date}
onChange={handleChange}
/>
</div>
);
}⚠️ 注意事项：
- 若无需本地编辑能力（即表单纯展示
props.values，不支持用户修改），可直接使用value={values?.date || '2023-11-20'}，但必须配onChange占位（如onChange={() => {}}），否则 React 会报错（受控组件不可无onChange）。 - 切勿在受控组件中突然切换为
defaultValue或null/undefined的value，这将导致 React 在受控与非受控间切换，引发严重警告甚至渲染异常。 -
useEffect同步外部values是关键：确保父组件传入新数据时，子组件能及时更新内部状态，避免“旧值残留”。
总结：defaultValue 适用于真正静态的初始值（如表单首次加载时的占位），而所有需响应 props 或 state 变化的场景，务必采用受控模式（value + onChange），并配合合理的状态同步逻辑。这是 React 表单开发的核心原则之一。
