React.js中如何避免输入值推入数组时被覆盖

问题根源 #

1. 普通变量无法保留状态：你用普通变量mychoices存储选择项，React组件每次重新渲染时，这个变量都会被重置为空数组，导致之前的选择内容丢失。而且直接修改普通变量不会触发组件更新，控制台打印的结果也无法反映最新状态。
2. 数组操作逻辑错误：handleAnswer里先创建了包含当前choice的新数组newArray，再把这个新数组push到mychoices中，导致数组变成二维结构，同时没有实现正确的累加效果。

修复方案 #

将mychoices改为useState管理的状态，利用React的状态机制保留数据并触发更新，同时修正数组操作逻辑：

import { useState } from 'react';

const initialValues = {
    title:'', 
    quiz:'',
    answer:'',
    start:'',
    stop:'',
    duration:'',  
    choice:""
}

function YourComponent() {
    // 用useState管理选择项数组，初始化为空数组
    const [mychoices, setMychoices] = useState([]);
    const [values, setValue] = useState(initialValues);

    const handleInput =(e)=>{
        const name = e.target.name;
        const myvalue = e.target.value;
        setValue({
            ...values,
            [name]: myvalue
        });
    };

    const handleAnswer =()=>{
        const { choice } = values;
        // 用函数式更新，确保基于最新的数组状态添加新元素
        setMychoices(prevChoices => [...prevChoices, choice]);
        // 重置输入框状态
        setValue(initialValues);
    };

    // 可选：监听mychoices变化，打印最新状态
    // useEffect(() => {
    //     console.log('当前选择项：', mychoices);
    // }, [mychoices]);

    return (
        <div>
            <input name="choice" value={values.choice} onChange={handleInput} placeholder="输入选项" />
            <button onClick={handleAnswer}>添加选项</button>
            {/* 可选：渲染已选择的选项 */}
            <div>
                <h3>已选选项：</h3>
                {mychoices.map((item, index) => (
                    <p key={index}>{item}</p>
                ))}
            </div>
        </div>
    );
}

export default YourComponent;

关键说明 #

• 用useState管理数组：React会自动保留mychoices的状态，每次调用setMychoices时触发组件重新渲染，确保数组内容不会丢失。
• 函数式更新状态：prevChoices => [...prevChoices, choice]这种写法可以避免异步更新导致的状态滞后问题，确保每次都基于最新的数组内容添加新元素。
• 异步状态的打印：不要直接在handleAnswer里打印mychoices（setState是异步操作，此时打印的是旧状态），可以通过useEffect监听mychoices的变化来查看最新值。

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