React中如何向useState数组状态追加字典键值对？

问题分析 #

• 错误的数组扩展方式：你尝试用...newValue把对象扩展到数组中，但对象不是可迭代类型，这就是触发newValue is not iterable错误的原因。正确做法是直接将整个对象作为元素添加到数组，而非扩展它。
• 异步状态更新的误解：setValueList是异步操作，调用后立刻console.log(valueList)拿到的还是更新前的旧状态，无法看到最新结果。
• Select组件事件绑定错误：Form.Select（推测为react-bootstrap组件）的选项交互应该通过组件的onChange属性绑定，给每个<option>加onClick在部分场景下不会触发，不是标准用法。

修正后的代码 #

import { useState, useEffect } from 'react';
import { Form } from 'react-bootstrap';

function App() {
    const [valueList, setValueList] = useState([]);

    // 监听state变化，打印最新值
    useEffect(() => {
        console.log('更新后的valueList:', valueList);
    }, [valueList]);

    const handleSelectChange = (e) => {
        const selectedValue = e.target.value;
        let newValue;
        // 根据选中值匹配对应的对象
        switch(selectedValue) {
            case '1':
                newValue = { value: "Good", id: 900 };
                break;
            case '2':
                newValue = { value: "Better", id: 500 };
                break;
            default:
                return; // 选中默认选项时不执行更新
        }
        // 正确追加对象到数组state
        setValueList(prevList => [...prevList, newValue]);
    };

    return (
        <>
            <Form.Select 
                aria-label="Default select example"
                onChange={handleSelectChange}
            >
                <option>Language</option>
                <option value='1'>First Value</option>
                <option value='2'>Second Value</option>
            </Form.Select>
        </>
    );
}

export default App;

关键修正点说明 #

1. 正确的状态更新逻辑：
   使用函数式更新setValueList(prevList => [...prevList, newValue])，prevList是当前最新的state数组，通过扩展运算符复制旧数组，再将新对象newValue追加到末尾，生成包含新元素的新数组。

2. 监听state变化：
   借助useEffect钩子监听valueList的变化，当state更新完成后自动打印最新值，避免异步更新导致的旧值问题。

3. 标准的Select事件绑定：
   给Form.Select添加onChange事件，通过事件对象e.target.value获取选中的选项值，再匹配对应的对象进行状态更新，这是下拉选择组件的可靠用法，比给每个option绑定onClick更稳定。

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