Question

我有以下对象数组。每个对象都是甜甜圈图中的图例元素。我想要实现的是，当我单击一个元素时，innerRadius应当设置为值2。如果我单击另一个元素，则前一个元素的innerRadius值应该设置为0。。因此，最后，只有我单击的元素应具有值2。

export const table1 = [
  {
    label: "p",
    angle: 5,
    style: {fill: "#1A3177"},
    innerRadius: 0,
    active: false,
    key: 0
  },{
    label: "ne",
    angle: 2,
    style: {fill: "#79C7E3"},
    innerRadius: 0,
    active: false,
    key: 1
  },{
    label: "nu",
    angle: 2,
    style: {fill: "#12939A"},
    innerRadius: 0,
    active: false,
    key: 2
  },{
    label: "na",
    angle: 1,
    style: {fill: "#FF9833"},
    innerRadius: 0,
    active: false,
    key: 3
  }
]

我尝试map初始数组，应用filter，reduce，splice。到目前为止，我尝试过的所有操作都会为我单击的所有元素返回innerRadius值为2的对象数组

 toogleHighlightOn = key => {
    let item = table1.map(i => i)
    let aaa = item.filter(i => i.key === key).reduce(i => i)
    aaa.innerRadius = 2
    const index = item.indexOf(aaa)
    item.splice([index], 1, aaa)

    console.log(aaa)
    console.log(table1)
    return this.setState({
      default: [...item]
    })
  }

Answer 1

toggleHighlightOn = key => {
    table1.forEach(i => i.innerRadius = 0);
    const newElement = table1.find(i => i.key === key);
    if (newElement) {
        newElement.innerRadius = 2;
    }

    return this.setState({
      default: [...table1]
    })
}

如何修改对象数组中的对象键值并返回初始数组？

1 个答案: