如果键不存在则插入对象

问题描述

我正在使用 recharts 向图表添加新行，其中对象的键值等于另一个对象的键值。它在找到键时工作正常，但如果找不到键值，脚本不会插入新对象。

我在状态中有这个对象数组

{
  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 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 中未在 chartData 中找到的值？

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

解决方法

试试这个，如果它提供你需要的结果，请告诉我

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,{ 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 });
}

,

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