如何解决如果键不存在则插入对象
我正在使用 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 });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。