React任务编辑页面：如何将选中成员信息同步至Task状态

问题描述 #

我正在使用React开发一个简易ToDo列表应用，当前为任务编辑页面。在该页面中，我实现了成员列表选择功能以变更任务所有者，但选中新成员后，任务数据状态currentTask中的ownerId和ownerName字段并未更新。经排查发现，选中的成员信息存储在currentMember状态中，而任务数据存储在currentTask状态中，需要将currentMember中的信息同步到currentTask的对应字段。

关键代码 #

成员选择部分

<ul className="list-group">
  <label htmlFor="owner" className="form-label">Task Owner</label>
  {members &&
    members.map((member, index) => (
      <li
        className={
          "list-group-item " + (index === currentIndex ? "active" : "")
        }
        onClick={() => setActiveMember(member, index)}
        key={index}
      >
        {member.firstName} {member.lastName}
      </li>
    ))}
</ul>

任务更新函数

const updateTask = () => {
  TaskDataService.update(currentTask.id, currentTask)
    .then(response => {
      console.log(response.data);
      setMessage("The task was updated successfully!");
    })
    .catch(e => {
      console.log(e);
    });
};

解决方案 #

1. 修改setActiveMember函数，同步更新currentTask #

原来的setActiveMember仅更新了选中成员的状态，需要在其中添加对currentTask的更新逻辑，将选中成员的id和姓名同步到currentTask的对应字段：

const setActiveMember = (member, index) => {
  setCurrentMember(member);
  setCurrentIndex(index);
  // 基于当前任务状态，更新所有者信息
  setCurrentTask(prevTask => ({
    ...prevTask,
    ownerId: member.id,
    ownerName: `${member.firstName} ${member.lastName}`
  }));
};

2. 确保currentTask初始状态包含所有者字段 #

检查currentTask的初始化代码，确保它一开始就有ownerId和ownerName字段，避免同步时出现未定义的情况：

const [currentTask, setCurrentTask] = useState({
  id: "",
  title: "",
  // 其他任务字段...
  ownerId: "",
  ownerName: ""
});

3. 可选：页面加载时初始化选中的成员 #

如果编辑页面需要默认显示当前任务的所有者，可在组件挂载时根据currentTask的ownerId匹配对应的成员，自动设置到currentMember和currentIndex：

import { useEffect } from 'react';

useEffect(() => {
  if (currentTask.ownerId && members.length > 0) {
    const targetMember = members.find(member => member.id === currentTask.ownerId);
    if (targetMember) {
      setCurrentMember(targetMember);
      setCurrentIndex(members.indexOf(targetMember));
    }
  }
}, [currentTask, members]);

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