如何在React中将用户输入存入数组？新手技术求助

先给你修正后的完整代码：

import "./styles.css";
import React, { useState } from "react";
import ReactDOM from "react-dom";

export default function App() {
  // 将names转为状态，修改后能触发组件重新渲染
  const [names, setNames] = useState([
    {nameCat: "Gibbis"},
    {nameCat: "Janet"},
    {nameCat: "Big Boy"},
    {nameCat: "Martin"},
    {nameCat: "Raccoon Baby"},
    {nameCat: "Bartholo-MEW"},
  ]);

  const [activeCat, setActiveCat] = useState(0);
  // 新增状态存储输入框内容
  const [inputValue, setInputValue] = useState("");
  
  const randomNames = () => {
    const len = names.length;
    setActiveCat(Math.floor(Math.random() * len));
  };

  // 同步输入框内容到状态
  const saveInput = (e) => {
    setInputValue(e.target.value);
  };

  // 添加新名称到数组
  const addNewName = () => {
    // 过滤空输入
    if (!inputValue.trim()) return;
    // 复制原数组并添加新元素（React状态不可直接修改）
    setNames([...names, { nameCat: inputValue.trim() }]);
    // 清空输入框
    setInputValue("");
    // 可选：自动切换到刚添加的名称
    setActiveCat(names.length);
  };

  return (
    <div className="container">
      <h1 className="gradient-text">let's name that cat!</h1>
      <h4>your cat's name is: <span className="catName">{names[activeCat].nameCat}</span></h4>
      <button onClick={randomNames}>new name!</button>
      <br/><br/>
      <input 
        type="text"
        value={inputValue}
        onChange={saveInput}
        placeholder="输入猫咪名字"
      />
      <br/><br/>
      <button onClick={addNewName}>add new name</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

核心错误修正说明： #

• this和this.state误用：你写的是函数式组件，不是类组件，函数组件里不能用this调用方法或访问状态，所有状态都要通过useState声明，直接调用函数即可。
• names未设为状态：原代码里的names是普通常量数组，修改它不会触发组件重新渲染，必须用useState将其转为状态，通过setNames更新。
• 事件绑定错误：
  • 输入框的onChange应绑定saveInput来同步输入内容，而非addNewName；
  • 添加按钮要用onClick事件，不是onChange，绑定addNewName。
• saveInput逻辑错误：原代码里的names(e.target.value)完全不符合语法，正确做法是用setInputValue把输入内容存入状态。
• 直接修改原数组：React状态是不可变的，不能用names.push()直接修改原数组，必须复制原数组后添加新元素，比如[...names, newItem]。
• class属性误用：React元素里要写className代替class，避免和JavaScript的class关键字冲突。

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