React组件defaultValue条件运算符状态变更不生效问题求助

问题根源 #

React中非受控组件的defaultValue（包括复选框的defaultChecked）仅在组件首次挂载时生效，后续组件重新渲染时，即便defaultValue的表达式结果发生变化，React也不会再更新输入框的值——它的设计初衷就是提供一个初始默认值，而非响应状态变化的动态值。

在你的场景中：

• 首次渲染时values为undefined，日期输入框的defaultValue被设置为'2023-11-20'，文本输入框设置为空字符串；
• 点击按钮后values更新为有效对象，组件重新渲染，此时defaultValue的表达式计算出正确的values.date和values.name，但React不会处理这个变化，因为defaultValue已经在首次挂载时用过了；
• 你觉得文本输入框“生效”是错觉：如果手动在文本框输入内容后再点击按钮，文本框的值同样不会更新为values.name，只有初始为空的状态下，可能看起来像是同步了，但本质还是非受控的初始值逻辑。

解决方法 #

方法一：改用受控组件（推荐） #

受控组件通过value绑定状态，配合onChange处理输入，能完全响应状态变化，这是React处理表单的标准方式。

修改后的代码示例：

function App() {
    const [values, setValues] = React.useState();
    const change = () => setValues({ name: 'name', date: '2023-11-28' });
    return (
        <Child values={values} change={change} />
    );
}

function Child({ values, change }) {
    // 初始化本地状态，优先使用props传入的values，否则用默认值
    const [localFormValues, setLocalFormValues] = React.useState(() => ({
        name: values?.name || '',
        date: values?.date || '2023-11-20'
    }));

    // 当props的values变化时，同步更新本地表单状态（比如切换编辑/创建模式）
    React.useEffect(() => {
        if (values) {
            setLocalFormValues({
                name: values.name || '',
                date: values.date || '2023-11-20'
            });
        }
    }, [values]);

    // 处理输入变化
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setLocalFormValues(prev => ({ ...prev, [name]: value }));
    };

    console.log(values);
    return (
        <div className="container">
            <button type="button" onClick={change}>clickMe</button>
            <input 
                type="text" 
                name="name"
                value={localFormValues.name} 
                onChange={handleInputChange} 
            />
            <input 
                type="date" 
                name="date"
                value={localFormValues.date} 
                onChange={handleInputChange} 
            />
        </div>
    );
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

方法二：强制组件重新挂载（适合非受控场景） #

通过给子组件设置唯一key，当values变化时改变key值，让React卸载旧组件并挂载新组件，这样defaultValue会重新计算生效。

修改后的App组件示例：

function App() {
    const [values, setValues] = React.useState();
    const change = () => setValues({ name: 'name', date: '2023-11-28' });
    // 用values的序列化值作为key，空状态时用固定字符串
    const childKey = values ? JSON.stringify(values) : 'empty-form';
    return (
        <Child values={values} change={change} key={childKey} />
    );
}

// Child组件保持你原来的代码不变
function Child({ values, change }) {
    console.log(values);
    return (
        <div className="container">
            <button type="button" onClick={change} >clickMe</button>
            <input type="text" defaultValue={values?.name ? values.name : ''} />
            <input type="date" defaultValue={values?.date ? values.date : '2023-11-20'} />
        </div>
    );
}

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