React中如何添加对象到数组并刷新渲染列表？

你的代码核心问题 #

• 用普通变量todayQuestsArray存数据，而非React state，修改它不会触发组件重渲染，页面自然不会更新。
• 在setQuest里直接存储JSX元素，完全搞错了React state的用法——state应该存数据，UI要基于数据动态生成，不能把UI结构存在state里。
• AddButton逻辑混乱，既没正确往目标数组添加数据，也没和渲染的列表关联起来。

正确实现步骤 #

1. 把初始任务数组放到useState中，让React管理这个状态。
2. 点击按钮时生成新的任务对象，通过setQuest更新state数组（必须创建新数组，不能直接修改原数组）。
3. 渲染列表时，基于state数组动态生成UI。

完整修正代码示例 #

import { useState } from 'react';

// 假设Tile、AddButton、css模块已提前定义
const QuestList = () => {
  // 用state管理任务数组，初始值为原todayQuestsArray
  const [quests, setQuests] = useState([
    {
      hardness: "easy",
      title: "reQuest",
      date: "Today:" + Date().slice(16, 21),
      type: "Health",
      isQuest: true,
    },
    {
      hardness: "easy",
      title: "reQuest",
      date: "Today:" + Date().slice(16, 21),
      type: "Health",
      isQuest: true,
    },
  ]);

  // 点击添加按钮的处理函数
  const handleAddNewQuest = () => {
    // 生成新的任务对象，可根据需求自定义属性
    const newQuest = {
      hardness: "easy",
      title: "New reQuest",
      date: "Today:" + Date().slice(16, 21),
      type: "Health",
      isQuest: true,
    };
    // 用展开运算符创建新数组，添加新任务，更新state
    setQuests(prevQuests => [...prevQuests, newQuest]);
  };

  return (
    <div>
      <ul className={css.today_section_list}>
        {/* 基于state数组渲染列表，必须加唯一key */}
        {quests.map((quest, index) => (
          <li key={index}>
            <Tile
              difficultyLevel={quest.hardness}
              title={quest.title}
              date={quest.date}
              type={quest.type}
              isQuest={quest.isQuest}
            />
          </li>
        ))}
      </ul>
      {/* 绑定点击事件到添加函数 */}
      <AddButton onClick={handleAddNewQuest}></AddButton>
    </div>
  );
};

export default QuestList;

关键细节说明 #

• state管理数据：只有React state的变化才会触发组件重渲染，所以必须把任务数组交由useState管理。
• 不可变更新：更新数组时不能直接修改原数组（比如prevQuests.push(newQuest)），React无法检测到这种变化。必须通过展开运算符或concat方法创建新数组。
• key属性：map渲染列表时，必须给每个子元素添加唯一key，帮助React高效识别元素变化，避免渲染错误。

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