Reactjs中将用户输入添加到状态对象所属数组时报错如何解决？

错误原因 #

你的代码运行报错主要有三个核心问题：

• 状态覆盖导致属性丢失：React 中更新对象类型的状态时，不会自动合并原有属性。你在 saveInput 中执行 setItem({ input: e.target.value }) 时，直接用仅包含 input 的新对象覆盖了原状态，原有的 cart 属性被直接删除。后续渲染执行 item.cart.map 时，item.cart 为 undefined，调用 map 方法就会抛出类型错误。同理 addNewItem 中 setItem({ cart: cart }) 也会直接覆盖丢失 input 属性。
• 直接修改不可变状态：React 要求所有状态都为不可变值，你直接调用 cart.push(input) 修改了原状态中的数组，属于违规操作，会导致 React 无法正确检测状态变更触发重渲染，也可能引发不可预期的副作用。
• 输入框未做双向绑定：输入框没有绑定 value 属性，无法受控，清空输入的逻辑也无法生效。

修复后的代码 #

import React, { useState } from 'react';

function Cart() {
  // 初始化状态同时声明 cart 和 input 两个属性
  const [item, setItem] = useState({ cart: ['Corn', 'Potato'], input: '' });

  const saveInput = (e) => {
    // 展开原有状态保留其他属性，仅更新 input
    setItem(prev => ({ ...prev, input: e.target.value }));
  };

  const addNewItem = () => {
    const { cart, input } = item;
    // 空输入直接拦截，避免添加无效内容
    if (!input.trim()) return;
    // 生成全新数组，不修改原状态
    const newCart = [...cart, input.trim()];
    // 更新状态，同时清空输入框内容
    setItem(prev => ({ ...prev, cart: newCart, input: '' }));
  };

  return (
    <div>
      {/* 绑定 value 属性实现输入框受控 */}
      <input type="text" value={item.input} onChange={saveInput} />
      <button onClick={addNewItem}>Add Item</button>
      <ol>
        {item.cart.map((subItems, sIndex) => {
          return <li key={sIndex}> {subItems}</li>;
        })}
      </ol>
    </div>
  );
}

export default Cart;

优化建议 #

如果两个状态关联性不强，可以拆分为两个独立的状态管理，代码逻辑会更简洁：

const [cart, setCart] = useState(['Corn', 'Potato']);
const [input, setInput] = useState('');

更新时不需要每次展开对象，直接调用对应的 set 方法即可。

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