React.js输入框自动填充后无法修改值的问题排查

问题描述 #

组件渲染完成后，直接在输入框中输入文本一切正常，但点击“填充”按钮（按钮显示为click）自动填充字段后，就无法再修改这些字段的值了，排查以下代码中的错误：

import React, {useState} from "react";

const Test = () => {

    const [item, setItem] = useState({});

    const updateItem = (e) => {

        item[e.target.id] = e.target.value;

        setItem(item);

    }

    const aaa = () => {

        let item = {
            link : 'testlink',
            title : 'testtitle',
            desc : 'testdesc'
        }

        setItem(item);

    }

    return (
        <form>
            <input type="text" name="link" id="link" value={item.link} onChange={updateItem} />
            <br/><br/>
            <input type="text" name="title" id="title" value={item.title} onChange={updateItem} />
            <br/><br/>
            <textarea name="desc" id="desc" value={item.desc} onChange={updateItem} />
            <input type="button" value="click" onClick={aaa} />
        </form>
    );
}

export default Test;

错误原因 #

核心问题在于updateItem函数违反了React的不可变更新原则：

• 直接修改了state原对象item[e.target.id] = e.target.value，之后调用setItem(item)时，因为state的引用没有发生变化，React会判定state未更新，不会触发组件重新渲染。
• 点击“填充”按钮时，aaa函数创建了一个新对象并设置为state，此时引用变化，组件重新渲染；但后续输入时，updateItem依然直接修改原state对象，引用不变，组件不再重新渲染，输入框的值也就无法同步更新。

修复后的代码 #

import React, {useState} from "react";

const Test = () => {
    const [item, setItem] = useState({});

    const updateItem = (e) => {
        // 通过扩展运算符创建新对象，保证state引用更新
        setItem({
            ...item,
            [e.target.id]: e.target.value
        });
    }

    const aaa = () => {
        const newItem = {
            link: 'testlink',
            title: 'testtitle',
            desc: 'testdesc'
        }
        setItem(newItem);
    }

    return (
        <form>
            {/* 添加默认值避免初始时出现undefined */}
            <input type="text" name="link" id="link" value={item.link || ''} onChange={updateItem} />
            <br/><br/>
            <input type="text" name="title" id="title" value={item.title || ''} onChange={updateItem} />
            <br/><br/>
            <textarea name="desc" id="desc" value={item.desc || ''} onChange={updateItem} />
            <input type="button" value="click" onClick={aaa} />
        </form>
    );
}

export default Test;

修复说明 #

1. 不可变更新state：updateItem函数中不再直接修改原state对象，而是使用扩展运算符...item复制原对象的所有属性，再修改目标属性，最后将新对象传入setItem，确保state引用发生变化，触发组件重新渲染。
2. 添加默认值：给输入框的value属性添加|| ''，避免初始state中没有对应属性时，输入框显示undefined，提升代码规范性。

内容的提问来源于stack exchange，提问作者Валерий Новожилов