Javascript .setState（）：在单击按钮时从对象数组中筛选人员

在下面的代码中，我试图在单击某人姓名旁边的“删除”按钮时将其从最终将成为组织结构图的组织结构图中删除。目前，什么也没有发生。最近的一次是，当点击任何一个删除按钮时，所有5个人都被删除，但我只想删除点击按钮的一个人。我觉得我犯的JS错误比React错误更多

任何帮助都将不胜感激，谢谢

    import React from "react";
import { Component } from "react";

const list = [
  {
    name: "Person 1",
    phone: "123-4567",
    itemId: 11
  },
  {
    name: "Person 2",
    phone: "123-4567",
    itemId: 12
  },
  {
    name: "Person 3",
    phone: "123-4567",
    itemId: 23
  },
  {
    name: "Person 4",
    phone: "123-4567",
    itemId: 34
  },
  {
    name: "Person 5",
    phone: "123-4567",
    itemId: 45
  }
];

class Entry extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: list
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    this.setState({
      list: this.state.list.filter(function(person) {
        return person !== e.target.value;
      })
    });
  }

  render() {
    return (
      <div>
        {this.state.list.map(item =>
          <tr key={item.itemId}>
            <td>
              {item.name}
            </td>
            <td>
              {item.phone}
            </td>
            <td>
              <a className="delete" onClick={this.handleClick} />
            </td>
          </tr>
        )}
      </div>
    );
  }
}

export default Entry;

从“React”导入React；
从“react”导入{Component}；
常数列表=[
{
姓名：“第1人”，
电话：123-4567，
项目编号：11
},
{
姓名：“第二人”，
电话：123-4567，
项目编号：12
},
{
姓名：“第三人”，
电话：123-4567，
项目编号：23
},
{
姓名：“第四人”，
电话：123-4567，
项目编号：34
},
{
姓名：“第5人”，
电话：123-4567，
项目编号：45
}
];
类条目扩展组件{
建造师（道具）{
超级（道具）；
此.state={
列表：列表
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
这是我的国家({
列表：this.state.list.filter（函数（人）{
返回人！==e.target.value；
})
});
}
render（）{
返回(
{this.state.list.map（项=>
{item.name}
{item.phone}
)}
);
}
}
导出默认条目；

您的单击事件没有值，您可以传递itemId：

onClick={() => this.handleClick(item.itemId)}

然后您的

handleClick

应该如下所示：

handleClick(itemId) {
    this.setState({
      list: this.state.list.filter(function(person) {
        return person.itemId !== itemId;
      })
    });
  }

---

您的单击事件没有值，您可以传递itemId：

onClick={() => this.handleClick(item.itemId)}

然后您的

handleClick

应该如下所示：

handleClick(itemId) {
    this.setState({
      list: this.state.list.filter(function(person) {
        return person.itemId !== itemId;
      })
    });
  }

//从“React”导入React；
//从“react dom”导入react dom；
常数列表=[
{
姓名：“第1人”，
电话：123-4567，
项目编号：11
},
{
姓名：“第二人”，
电话：123-4567，
项目编号：12
},
{
姓名：“第三人”，
电话：123-4567，
项目编号：23
},
{
姓名：“第四人”，
电话：123-4567，
项目编号：34
},
{
姓名：“第5人”，
电话：123-4567，
项目编号：45
}
];
类条目扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
列表：列表
};
this.handleClick=this.handleClick.bind（this）；
}
把手舔（项目）{
let filterList=this.state.list.filter（（用户）=>{
if（user.itemId==item.itemId）{
返回false；
}
返回true；
})
这是我的国家({
列表：过滤器列表
});
}
render（）{
返回(
{this.state.list.map（项=>
{item.name}
{item.phone}
this.handleClick（item）}>Del
)}
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
删除


//从“React”导入React；
//从“react dom”导入react dom；
常数列表=[
{
姓名：“第1人”，
电话：123-4567，
项目编号：11
},
{
姓名：“第二人”，
电话：123-4567，
项目编号：12
},
{
姓名：“第三人”，
电话：123-4567，
项目编号：23
},
{
姓名：“第四人”，
电话：123-4567，
项目编号：34
},
{
姓名：“第5人”，
电话：123-4567，
项目编号：45
}
];
类条目扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
列表：列表
};
this.handleClick=this.handleClick.bind（this）；
}
把手舔（项目）{
let filterList=this.state.list.filter（（用户）=>{
if（user.itemId==item.itemId）{
返回false；
}
返回true；
})
这是我的国家({
列表：过滤器列表
});
}
render（）{
返回(
{this.state.list.map（项=>
{item.name}
{item.phone}
this.handleClick（item）}>Del
)}
);
}
}
ReactDOM.render(
,
document.getElementById（'app'）
);
删除
上述两种解决方案都违反了react的最佳实践之一，或者我应该说是react的基本实践，即我们应该使用
属性初始值设定项语法
，它传递的是上面定义的函数，而不是在prop中传递箭头函数。您可以在本部分最后一段中阅读

类条目扩展组件{
/*您的处理程序方法*/
handleDelete（项目ID）{
return（）=>{
这是我的国家({
/*从旧状态筛选已删除项的逻辑*/
});
}
}
/*渲染方法*/
render（）{
返回(
{/*正在传递onDelete回调*/}
)
}
}
上述两种解决方案都违反了react的最佳实践之一，或者我应该说是react的基本实践，即我们应该使用
属性初始值设定项语法
，它传递的是上面定义的函数，而不是在prop中传递箭头函数。您可以在本部分最后一段中阅读

类条目扩展组件{
/*您的处理程序方法*/
handleDelete（项目ID）{
return（）=>{
这是我的国家({
/*从旧状态筛选已删除项的逻辑*/
});
}
}
/*渲染方法*/
render（）{
返回(
{/*正在传递onDelete回调*/}
)
}
}
你期望e.target.value是什么值？你期望e.target.value是什么值？这就成功了。我的基本JS错误。非常感谢你的CD。这就成功了。我的基本JS错误。非常感谢你的CD。安舒尔，非常感谢你的这张r