React中如何使用扩展运算符修改数组对象的clicked属性值？

核心思路 #

React状态不可直接修改，必须通过创建新的数组/对象来更新状态。我们可以结合扩展运算符和map方法，遍历原数组，找到目标对象后生成新对象修改clicked属性，其余对象保持原样，最后通过状态更新函数替换原状态。

完整实现代码 #

首先修正你提供的初始代码的语法错误，然后实现点击逻辑：

import { useState } from 'react';

function QuestionComponent() {
  // 初始化问题数组
  const initialQuestions = [
    {
      title: "Was möchte ich lernen?",
      letters: ["a", "b", "c", "d"],
      variants: ["Deutsch", "English", "Franzosisch", "Turkisch"],
      clicked: false
    },
    {
      title: "Welchen Rat gab mir meine Mutter?",
      letters: ["a", "b", "c", "d"],
      variants: ["Viel tanzen", "Viel trinken", "Viel lesen", "Viel schlafen"],
      clicked: false
    }
  ];

  // 初始化状态，建议指定明确类型替代any，提升类型安全性
  const [questions, setQuestions] = useState(initialQuestions);

  // 通过索引定位目标对象的点击处理函数
  const handleClick = (index) => {
    setQuestions(prevQuestions => {
      return prevQuestions.map((question, idx) => {
        // 匹配到目标索引时，用扩展运算符创建新对象并修改clicked
        if (idx === index) {
          return { ...question, clicked: true };
        }
        // 其他对象直接返回，保持引用不变
        return question;
      });
    });
  };

  return (
    <div>
      {questions.map((question, index) => (
        <div key={index}>
          <h3>{question.title}</h3>
          {/* 绑定点击事件，传递当前对象的索引 */}
          <button onClick={() => handleClick(index)}>
            {question.clicked ? '已点击' : '点击触发'}
          </button>
        </div>
      ))}
    </div>
  );
}

export default QuestionComponent;

其他定位方式（可选） #

如果不想用索引，也可以通过对象的唯一标识（比如title）来定位目标对象：

const handleClickByTitle = (targetTitle) => {
  setQuestions(prevQuestions => 
    prevQuestions.map(question => 
      question.title === targetTitle 
        ? { ...question, clicked: true } 
        : question
    )
  );
};

// 在按钮中使用
<button onClick={() => handleClickByTitle(question.title)}>
  {question.clicked ? '已点击' : '点击触发'}
</button>

关键说明 #

• 使用扩展运算符{...question}是为了复制原对象的所有属性，避免直接修改原状态对象，保证React能检测到状态变化并触发重渲染。
• 用map遍历数组时，仅修改目标对象，其余对象直接返回，这样能减少不必要的对象复制，提升性能。

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