数组在数组中时只更新一个参数 React

Question

我有这样的状态数据：

const IssuesList = () => {
  const [issuesList, setIssuesList] = useState([
    {
      groupId: 0,
      groupData: "19-07-2016",
      groupIssues: [
        {
          id: 0,
          title: "Page changes",
          star: true,
        },
        {
          id: 1,
          title: "Review of last issues",
          star: true,
        },
      ],
    },
    {
      groupId: 1,
      groupData: "18-07-2016",
      groupIssues: [
        {
          id: 2,
          title: "Visual UI Update Review",
          star: false,
        },
        {
          id: 3,
          title: "Sidebar changes",
          star: false,
        },
      ],
    },
    {
      groupId: 2,
      groupData: "15-07-2016",
      groupIssues: [
        {
          id: 4,
          title: "Crash update",
          star: false,
        },
        {
          id: 5,
          title: "Page visual UI Update Review",
          star: true,
        },
        {
          id: 6,
          title: "Sidebar update",
          star: false,
        },
      ],
    },
    {
      groupId: 3,
      groupData: "14-07-2016",
      groupIssues: [
        {
          id: 7,
          title: "Crash issue",
          star: true,
        },
        {
          id: 8,
          title: "Visual update & Crash resolve",
          star: true,
        },
        {
          id: 9,
          title: "Header changes",
          star: false,
        },
      ],
    },
  ]);

  return (
    <div className="issuesList">
      {issuesList.map((group) => (
        <IssueGroup
          key={group.groupId}
          group={group}
          setIssuesList={setIssuesList}
          issuesList={issuesList}
        />
      ))}
    </div>
  );
};

export default IssuesList;

当我单击 StarIcon 组件中的特定图标时，我想仅更改 groupIssues 中的 star 参数：

const StarIcon = ({ star, index, id, setIssuesList, issuesList, group }) => {
  const issueStar = group.groupIssues[index].star;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      //xmlns:xlink="http://www.w3.org/1999/xlink"
      preserveAspectRatio="xMidYMid"
      width="17"
      height="16"
      viewBox="0 0 17 16"
      className={star ? "staricon filled" : "staricon unfilled"}
      onClick={() => {
        // setIssuesList() TODO
      }}
    >
      <path
        d="M8.500,0.000 L11.301,5.028 L16.999,6.112 L13.033,10.302 L13.753,16.000 L8.500,13.561 L3.247,16.000 L3.967,10.302 L0.001,6.112 L5.699,5.028 L8.500,0.000"
        fill={star ? "#21233d" : "#fff"}
        stroke={star ? "none" : "#e0e0e0"}
      />
    </svg>
  );
};

export default StarIcon;

在该组数据中执行此操作的最佳方法是什么。我知道扩展运算符在那里会很有帮助，但是当我们有对象数组然后我们需要进入特定对象中的另一个数组时，我不知道如何在这个数据结构中实现它。也许改变数据结构会更好或将其分成两个数组？

Ui view here

Answer 1

你应该使用对象的深拷贝，扩展操作符只创建一个浅拷贝。

例子：

const changeStar = (grpId, issueId) => {
 setIssuesList(list => (
   list.map(item => (
     item.groupId === grpId ? 
       {...item, groupIssues: item.groupIssues.map(issue => (
         issue.id === issueId ? {...issue, star: !issue.star} : issue
       ))}
     : item
   )
 ))
}

解释：

map 函数创建一个全新的数组。除非您有匹配的groupIds，否则它将按原样返回元素。在 groupIds 中，您将根据 id 更改项目。最后，您深度复制了该对象并设置了一个具有所需结果的全新数组。

Answer 2

我认为您需要这样的东西：当前问题列表状态的副本。从该状态副本更新特定星。设置更新状态。

这是一个工作沙盒示例：https://codesandbox.io/s/bold-browser-cnfw3?file=/src/App.js