React列表项输入框onChange仅能更新单个字符问题求助

问题根源 #

输入框更新异常的核心原因是未通过React的state更新机制管理列表项数据，直接修改了非state对象的属性，导致组件无法触发重渲染，输入框显示无法同步更新。具体问题点包括：

• 直接修改list.listItems（来自props或初始变量），而非更新listItems状态
• 渲染列表时绑定的是list.listItems而非state中的listItems
• 组件初始化逻辑错误，直接在函数体内修改list变量，违反React状态管理规则
• useEffect的依赖设置错误，无法正确响应props变化初始化状态

修复步骤 #

1. 统一用state管理所有表单数据：放弃直接操作list变量，所有表单数据（包括列表项）都通过useState维护
2. 正确更新列表项状态：修改updateListItem时，通过setListItems创建新数组（不可变更新），触发组件重渲染
3. 修正渲染逻辑：列表项输入框绑定state中的listItems，而非原始的list变量
4. 修复初始化逻辑：通过useEffect监听props.list变化，正确初始化所有state
5. 移除无效的refresh变量：改用props.list作为useEffect的依赖

完整修复代码 #

const EditList = (props) => {
    const [listTitle, setListTitle] = useState('');
    const [owner, setOwner] = useState('');
    const [listItems, setListItems] = useState([]);
    const navigate = useNavigate();
    const newListCreation = !props.list;

    // 监听props.list变化，初始化表单数据
    useEffect(() => {
        if (props.list) {
            setListTitle(props.list.title);
            setOwner(props.list.owner);
            setListItems([...props.list.listItems]); // 浅拷贝避免直接修改props
        } else {
            // 新建列表时重置状态
            setListTitle('');
            setOwner('');
            setListItems([]);
        }
    }, [props.list]);

    const handleFormSubmit = (event) => {
        event.preventDefault();

        const editedList = {
            id: props.list?.id,
            title: listTitle,
            owner: owner,
            listItems: listItems,
        };

        saveList(editedList);
    };

    const saveList = async (list) => {
        let response;

        if (newListCreation) {
            response = await dataSource.post('/list', list);
        } else {
            response = await dataSource.put('/list', list);
        }
        console.log(response?.data);
        props.onEditList(navigate);
    };

    const handleCancel = () => {
        navigate("/");
    };

    const updateOwner = (event) => {
        setOwner(event.target.value);
    };

    const updateTitle = (event) => {
        setListTitle(event.target.value);
    };

    const updateListItem = (event) => {
        const itemId = parseInt(event.target.id);
        const newValue = event.target.value;
        // 不可变更新：创建新数组，修改对应项的itemText
        setListItems(prevItems => 
            prevItems.map(item => 
                item.id === itemId ? {...item, itemText: newValue} : item
            )
        );
    };

    const renderItemList = listItems.map((listItem) => {
        return (
            <input 
                key={listItem.id} 
                type="text" 
                id={listItem.id} 
                placeholder="Enter list items here"
                className="form-control" 
                value={listItem.itemText} 
                onChange={updateListItem} 
            />
        );
    });

    return (
        <div className="container-md">
            <form onSubmit={handleFormSubmit}>
                <h1>{newListCreation ? "Create New" : "Edit"}List </h1>
                <div className="mb-3">
                    <label className="form-label" htmlFor="listTitle">List Title</label>
                    <input 
                        type="text" 
                        id="listTitle" 
                        className="form-control" 
                        value={listTitle} 
                        onChange={updateTitle} 
                    />

                    <label className="form-label" htmlFor="listOwner">Owner</label>
                    <input 
                        type="text" 
                        id="listOwner" 
                        placeholder="Enter List Owner" 
                        className="form-control" 
                        value={owner} 
                        onChange={updateOwner} 
                    />

                    <label className="form-label" htmlFor="listItems">List Items</label>
                    {renderItemList}

                    <button type="button" className="btn btn-secondary">+ Add new list item +</button>
                </div>
                <div>
                    <button type="button" className="btn btn-light" onClick={handleCancel}>Cancel</button>
                    <button type="submit" className="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    );
};

export default EditList;

关键说明 #

• 不可变更新：修改列表项时，通过map创建新数组，避免直接修改原数组，确保React能检测到state变化并触发重渲染
• 依赖props初始化：用useEffect监听props.list，当props变化时自动更新表单状态，避免直接在函数体内修改变量
• 统一状态源：所有表单输入都绑定到对应的state变量，确保显示和数据同步

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