reactjs - 使用扩展运算符更改深层复制值

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,
        },
      ],
    }, ///....

但是，每当我更改labelto 值时。然后，DataContext datasets消失了。我认为深度复制datasets不是我应该做的，所以我想知道如何解决它。

先感谢您 ！

标签： reactjs

Answer 1

我试图复制您提供的代码结构并提出了解决方案。您不能直接将剩余运算符应用于数据集，因为它是一个数组，并且您计划将剩余运算符应用于数据集中的每个元素。

因此，我映射datasets并应用了深层休息算子。

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);