React使用useState根据输入值向数组添加元素功能异常求助

问题排查点 #

• 输入框值绑定错误：你声明的activityNames是数组类型，直接写activityNames.name读取属性会得到undefined，无法正确绑定输入框的值，需要单独声明一个状态存储输入框的实时输入内容。
• 点击事件取值逻辑错误：handleSetName绑定在按钮的onClick事件上，回调里拿到的e是按钮的点击事件对象，e.target.value无法读取到输入框内的内容，自然无法生成符合要求的对象。
• 受控组件逻辑缺失：如果要使用受控输入框，需要给输入框绑定onChange事件实时更新输入值对应的状态，点击添加按钮时从该状态取值生成对象即可。

核心逻辑修正参考 #

函数部分

// 新增输入框专属状态
const [inputVal, setInputVal] = useState('')
const [activityNames, setName] = useState([
    { id: 1, name: 'Feel free to add, edit and delete!' }
]);
const handleSetName = () => {
    // 空值过滤，可根据需求调整
    if(!inputVal.trim()) return
    const newItem = {
        id: Math.random() * 10000,
        name: inputVal
    };
    // 建议用函数式更新拿到最新的数组状态，避免闭包问题
    setName(prev => prev.concat(newItem));
    // 添加完成后清空输入框
    setInputVal('')
};

输入框与按钮部分

<input type="text" placeholder="Aktivitätsname" value={inputVal} onChange={e => setInputVal(e.target.value)} />
<button onClick={handleSetName}>
    <i className="fas fa-plus"></i>
</button>

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