React中出现Cannot read properties of undefined (reading 'push')报错求助

错误原因 #

问题出在setobj(obj.data.push(dat))这一行：

• Array.push()的返回值是数组的新长度，不是修改后的数组。第一次提交时，obj.data.push(dat)返回数字（比如2），调用setobj后，obj从原本包含data数组的对象变成了数字。
• 第二次提交时，obj已经是数字，没有data属性，访问obj.data会得到undefined，再调用push就触发报错。
• 同时，直接对state中的数组使用push是原地修改，违反React状态不可变的原则，可能导致组件渲染异常。

正确解决方案 #

更新包含数组的对象状态时，必须创建新的数组和对象，保证状态的不可变性，推荐使用函数式更新（避免闭包捕获旧state的问题）：

修正后的handle函数

const handle = (e) => {
  e.preventDefault();
  const dat = {
    name: name,
    lastname: lname
  };
  // 基于最新state创建新对象和数组
  setobj(prevObj => ({
    ...prevObj,
    data: [...prevObj.data, dat]
  }));
  // 清空输入框，优化用户体验
  setname("");
  setlname("");
};

完整修正代码 #

function App() {
  
  const [obj, setobj] = useState({
    data: [
      {
        name: "chetan",
        lastname: "vashisht"
      }
    ]
  });

  const [name, setname] = useState("");
  const [lname, setlname] = useState("");

  const handle = (e) => {
    e.preventDefault();
    const dat = {
      name: name,
      lastname: lname
    };
   
    setobj(prevObj => ({
      ...prevObj,
      data: [...prevObj.data, dat]
    }));
    setname("");
    setlname("");
  };

  return (
    <div className="App">
      <form onSubmit={handle}>
        <label>Enter your name:</label>
        <input
          id="ing"
          type="text"
          value={name}
          onChange={(e) => setname(e.target.value)}
          required
          autoFocus
        />
        <br />
        <label>Enter last name:</label>
        <input
          type="text"
          value={lname}
          onChange={(e) => setlname(e.target.value)}
          required
        />
        <br />
        <button>Sign in</button>
      </form>
    </div>
  );
}

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