如果密鑰不存在，則插入 object

Question

我正在使用 recharts 在圖表中添加新行，其中 object 的鍵值等於另一個 object 的鍵值。 它在找到密鑰時工作正常，但如果找不到密鑰值，腳本不會插入新的 object。

我在 state 中有這個對象數組

{
  chartData: [
    { name: "100", line1: "332" },
    { name: "200", line1: "1235" },
    { name: "300", line1: "43534" },
    { name: "500", line1: "645324" },
    { name: "1000", line1: "345345" },
    { name: "2000", line1: "234234" },
    { name: "5000", line1: "654654" },
    { name: "10000", line1: "123" },
  ]
}

而這個 function 正在添加一個值相同的行

function addLine() {
  let newData = [
    { name: '100', line2: '6666' },
    { name: '230', line2: '2342342' },
    { name: '420', line2: '34234' },
    { name: '120', line2: '123656' },
    { name: '630', line2: '234245' },
  ];

  newData.map((io) => {
    this.setState((prevState) => ({
      chartData: prevState.chartData.map((el) =>
        el.name === io.name ? { ...el, line2: io.line2 } : { ...io, newData }
      ),
    }));
  });
}

如何插入 newData 中未在newData中找到的chartData ？

可以在此處找到示例https://codesandbox.io/s/recharts-toggle-legend-forked-i1qbd?file=/SampleChart.jsx:847-1310

Answer 1

試試這個，如果它滿足你需要的結果，請告訴我

addLine() {
   const newData = [
      { name: "100", line2: "6666" },
      { name: "200", line2: "2342342" }
    ];
    const { chartData } = this.state;
    const modifiedData = chartData;
    // First add line2 values to the modifiedData array
    chartData.map((data, index) => 
      newData.map(({ name, line2 }) => {
        // Update the specific index with line2
        if (data.name === name)
          modifiedData[index] = { ...data, line2 };
        // push values that do not exist on modifiedData
        if (!modifiedData.some(modData => modData.name === name))
          modifiedData.splice(index, 0, { name, line2 }); // This is very important, if you want the new line to be connected if its data is not equal to chartData
        return data;
      })
    );
    this.setState({ chartData: modifiedData });
}

Answer 2

newData.map((io) => {
  this.setState((prevState) => ({
    chartData: prevState.chartData.map((el) =>
      el.name === io.name ? { ...el, line2: io.line2 } : { ...io, newData }
    ),
  }));
});

將此替換為：

let chartData = this.state.chartData;
newData.map((io) => {
  const matchIdx = chartData.findIndex(el => el.name === io.name);
  if (matchIdx !== -1) {
    chartData[matchIdx] = {
      ...chartData[matchIdx],
      line2: io.line2
    };
  } else {
    chartData.push(io);
  }
});

this.setState({ chartData: chartData });