使用.map（Javascript/React）获取数组中要删除的元素的索引

我想在React应用程序中将一系列成分显示为列表。与每个项目关联的是一个

Delete

按钮，单击该按钮时，将从数组中删除该特定元素，并使用更新的数组重新渲染

有没有办法找到元素的索引并将其传递给

handleDelete（）

函数

还是通过循环所有元素来查找和删除的唯一方法

handleDelete(id) {
   //use id to remove element from the array 
   //setState of newly filtered array 
}


render() {
    var ingredients = ["chicken", "rice"]
    return (

    <ul className="pantry"> 
    {
        ingredients.map((ingred, index) => {
            return <li key={ingred.index}><button onClick={this.handleDelete.bind(this, ingred.index)}>Delete</button>{ ingred }</li>
        })
    } 
    </ul>

    );
}

handleDelete（id）{
//使用id从数组中删除元素
//新筛选数组的设置状态
}
render（）{
var成分=[“鸡肉”、“大米”]
返回(

{
成分图（（红色，索引）=>{
return
Delete{ingred}
})
} 

);
}

看来你差不多完成了。您只需要在方法中创建一个闭包并实际返回回调函数。您还需要将配料储存在状态。（我还对代码进行了一些清理。）

构造函数（道具）{
超级（道具）；
此.state={
配料：[“鸡肉”、“大米”]，
};
this.handleDelete=this.handleDelete.bind（this）；
}
handleDelete（索引删除）{
//使用id从数组中删除元素
//新筛选数组的设置状态
返回（事件）=>{
this.setState（（当前状态）=>{
const currentComponents=currentState.Components；
返回{
配料：CurrentComponents.slice（0，indexToDelete-1）.concat（CurrentComponents.slice（i，CurrentComponents.length）），
};
});
}; 
}
渲染成分（成分、索引）{
返回(

删除
{成分}

);
}
render（）{
返回(

{
this.state.components.map（this.renderIngredient）
} 

);
}

看来你差不多完成了。您只需要在方法中创建一个闭包并实际返回回调函数。您还需要将配料储存在状态。（我还对代码进行了一些清理。）

构造函数（道具）{
超级（道具）；
此.state={
配料：[“鸡肉”、“大米”]，
};
this.handleDelete=this.handleDelete.bind（this）；
}
handleDelete（索引删除）{
//使用id从数组中删除元素
//新筛选数组的设置状态
返回（事件）=>{
this.setState（（当前状态）=>{
const currentComponents=currentState.Components；
返回{
配料：CurrentComponents.slice（0，indexToDelete-1）.concat（CurrentComponents.slice（i，CurrentComponents.length）），
};
});
}; 
}
渲染成分（成分、索引）{
返回(

删除
{成分}

);
}
render（）{
返回(

{
this.state.components.map（this.renderIngredient）
} 

);
}

索引

和

ingred

是独立的变量<代码>索引不是

的属性，ingred

是您问题的答案。您可以将索引存储为道具，并在函数中使用它从数组中删除。@charlietfl这是您正在做的假设。

ingred

变量可以是一个具有名为index属性的对象。@Ted数组

components

就在这里

index

和

ingred

是独立的变量<代码>索引不是

的属性，ingred

是您问题的答案。您可以将索引存储为道具，并在函数中使用它从数组中删除。@charlietfl这是您正在做的假设。

ingred

变量可以是一个具有名为index属性的对象。@Ted数组

components

就在这里

constructor(props) {
  super(props);

  this.state = {
    ingredients: ["chicken", "rice"],
  };

  this.handleDelete = this.handleDelete.bind(this);
}

handleDelete(indexToDelete) {
  //use id to remove element from the array 
  //setState of newly filtered array
  return (event) => {
    this.setState((currentState) => {
      const currentIngredients = currentState.ingredients;

      return {
        ingredients: currentIngredients.slice(0, indexToDelete - 1).concat(currentIngredients.slice(i, currentIngredients.length)),
      };
    });
  }; 
}

renderIngredient(ingredient, index) {
  return (
    <li key={ingred}>
      <button onClick={this.handleDelete(index)}>
        Delete
      </button>
      {ingredient}
    </li>
  );
}

render() {
    return (
      <ul className="pantry"> 
      {
        this.state.ingredients.map(this.renderIngredient)
      } 
      </ul>
    );
}