Reactjs 从嵌套列表中删除项

我有一份清单：

• 精选调味品
• 额外的肉[x]
• 额外的土豆[x]
• 选择蛋白质
• 奎索暗黑破坏神[x]

每个项目都有一个删除按钮，我想在单击“x”按钮时删除所选项目，以下是我的代码：

状态数组：

extraOptionsCategory: [
        {
          "name": "Select Dressing",
          "id": 1,
          extraOptions: [{
            "name": "Extra Meat",
            "price": 4
          },
          {
            "name": "Extra Potato",
            "price": 2
          }]
        },
        {
          "name": "Select Protein",
          "id": 2,
          extraOptions: [{
            "name": "Queso Diablo",
            "price": 2
          }]
        }
      ]

渲染代码：

                {this.state.extraOptionsCategory.map((a, index) => {

                  return (
                    <div key={index}>

                      {a.name}

                      {a.extraOptions.map((b, idx) => {
                        return (
                          <div key={idx}>

                            {b.name}

                            <button onClick={this.removeItem.bind(this, idx)}>x</button>
                          </div>
                        )
                      })}

                    </div>
                  )
                })}
              </div>

---

我认为最好是为每个extraOptions类别和extraOptions设置一个唯一的id，而不是依赖id作为映射的索引

原因是您正试图删除某些内容，您希望通过它的唯一id来执行此操作，而不是它在数组中的位置与您要删除的选项完全无关

使用该唯一id并将其设置为按钮属性的值

将该值传递给按钮上的removeItem函数

如果您使用的是来自映射的索引，并且数组发生了变化，则可能没有删除您认为正在引用的内容

附加选项类别：[
{
“名称”：“选择敷料”，
“id”：1，
额外选择：[{
“名称”：“额外的肉”，
“价格”：4，
“id”：1a
}]
}]

{this.removietem.bind（this，e.value）}value={b.id}>x

removeItem = (idx) => {
    console.log(idx);

    ???
  }