使用扩展运算符更改深拷贝值。

Question

我尝试更改 DataContext 的值，所以我这样做：

const changeSecondLabel = index => value => {
    setDataContext(dataContext =>
      dataContext.map((data, i) =>
        i === index
          ? {
              ...data,
              datasets: [{ ...data.datasets.label, label: value }],
            }
          : data
      )
    );
  };

这是 DataContext

 const [DataContext, setDataContext] = useState([
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, ///
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, ///
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, ///....

然而，每当我将 label 更改为值时，DataContext 的 datasets 就消失了。 我认为深复制 datasets 不是我应该做的方法， 所以我想知道如何修复它。

感谢您！

Answer 1

我尝试复制您提供的代码结构并找到了解决方案。由于数据集是一个数组，而您计划将 rest 操作符应用于数据集中的每个元素，因此不能直接将 rest 操作符应用于数据集。

因此，我映射了 datasets 并应用了深层 rest 操作符。

let dataSet = [
  {
    labels: "One",
    datasets: [
      {
        label: "dataSetting",
        data: "defaultDatas",
        backgroundColor: "defaultBackgroundColor",
      },
    ],
  },{
    labels: "Two",
    datasets: [
      {
        label: "TwodataSetting",
        data: "TwodefaultDatas",
        backgroundColor: "TwodefaultBackgroundColor",
      },
    ],
  },{
    labels: "Three",
    datasets: [
      {
        label: "ThreedataSetting",
        data: "ThreedefaultDatas",
        backgroundColor: "ThreedefaultBackgroundColor",
      },
    ],
  },
];

const changeSecondLabel = index => value => {
    debugger;
  dataSet = dataSet.map((data, i) =>
    i === index
      ? {
          ...data,
          datasets: data.datasets.map(set => {return {...set, label: value}}),
        }
      : data
  )
};

changeSecondLabel(1)("New Value");
console.log(dataSet);