如何在React中为对象列表多值更新State且不使用多个useState

你的核心问题在于没有正确遵循React的不可变更新原则，同时原代码存在事件绑定缺失、state更新语法错误的问题。以下是修复后的完整代码及关键说明：

修复后的组件代码 #

const NewCard = () => {
  const [card, setCard] = useState({
    name: "",
    questions: Array.from({ length: 9 }, () => ({ question: "", answer: "" })) // 简化重复对象的写法
  });

  // 更新卡片名称
  const handleNameChange = (event) => {
    setCard(prevCard => ({
      ...prevCard, // 保留原state的所有其他属性
      name: event.target.value
    }));
  };

  // 更新指定索引的问题/答案
  const handleQuestionUpdate = (index, field, value) => {
    setCard(prevCard => {
      // 1. 复制原questions数组，避免直接修改原state
      const updatedQuestions = [...prevCard.questions];
      // 2. 复制对应索引的对象，修改目标字段
      updatedQuestions[index] = {
        ...updatedQuestions[index],
        [field]: value
      };
      // 3. 返回新的state对象
      return { ...prevCard, questions: updatedQuestions };
    });
  };

  // 添加新的问题项
  const handleAddQuestion = () => {
    setCard(prevCard => ({
      ...prevCard,
      questions: [...prevCard.questions, { question: "", answer: "" }]
    }));
  };

  return (
    <div className="newcard-container">
      <div className="card-container">
        <h3>Podaj nazwe fiszki</h3>
        <input 
          type="text" 
          value={card.name} 
          onChange={handleNameChange} // 绑定更新事件
        />
      </div>
      <div className="questions-container">
        {card.questions.map((q, index) => (
          <div className="question" key={index}> {/* 添加唯一key，满足React列表渲染要求 */}
            <h4>Podaj pytanie </h4>
            <input 
              type="text" 
              value={q.question} 
              onChange={(e) => handleQuestionUpdate(index, 'question', e.target.value)}
            />
            <h4>Podaj odpowiedź</h4>
            <input 
              type="text" 
              value={q.answer} 
              onChange={(e) => handleQuestionUpdate(index, 'answer', e.target.value)}
            />
          </div>
        ))}
        <button onClick={handleAddQuestion}>Dodaj pytanie</button>
      </div>
    </div>
  );
};

关键修复点说明 #

1. State更新的不可变性
   React要求state是不可变的，不能直接修改原state对象或数组。因此每次更新时都要：

   • 用...展开运算符复制原对象/数组
   • 对需要修改的嵌套对象单独复制并更新，避免影响原state

2. 正确的事件绑定
   原代码中所有input都缺少onChange事件，导致输入无法触发state更新，现在为每个输入框绑定了对应的处理函数。

3. 数组项的索引识别
   在map遍历questions时添加了index参数，这样可以精准定位需要更新的问题项，配合handleQuestionUpdate函数完成指定字段的更新。

4. 函数式更新的使用
   使用setCard(prevCard => {...})的形式更新state，确保每次更新都基于最新的state值，避免因闭包导致的state过期问题。

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