reactjs 从 React 中的数组中删除项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48077103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove item from array in React
提问by Dave Wicomo
I have problem with removeItem function (it should remove current <li>that button is nested in, and item from array on this.state.list), no code currently because I try so much things of that and nothing working so I end up on console.logswatch what happened so I deleted it
我的 removeItem 函数有问题（它应该删除当前<li>嵌套的按钮，以及 this.state.list 上的数组中的项目），目前没有代码，因为我尝试了很多东西，但没有任何效果，所以我最终console.logs看的是什么发生了所以我删除了它
import React, { Component } from 'react';
import './Todo.css';
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
text: ''
}
this.textChange = this.textChange.bind(this);
this.addToList = this.addToList.bind(this);
this.removeItem = this.removeItem.bind(this);
}
textChange(e) {
this.setState({
text: e.target.value
})
}
addToList() {
this.setState(prevState => ({
list: prevState.list.concat(this.state.text),
text: ''
}))
}
removeItem(e) { ?
? ? ? ? ? ? ?
}
render() {
return(
<div>
<h1>My Todo List</h1>
<h3>Add item</h3>
<input value={this.state.text} onChange={e => this.textChange(e)}/>
<button onClick={this.addToList}>+</button>
<ul>{this.state.list.map((x,y) => {
return <li key={y}>{x}
<button onClick={this.removeItem}>-</button>
</li>})}
</ul>
</div>
)
}
}
export default Todo;
回答by Chag
You can filter your list by the issue you want, and it will be auto removed, for example, if you want to remove all items = 3 :
您可以按您想要的问题过滤您的列表，它将被自动删除，例如，如果您想删除所有 items = 3 ：
list: prevState.list.filter(x=> x != 3);
列表： prevState.list.filter(x=> x != 3);
Good luck!
祝你好运！
回答by denismart
Removing item from array by index:
按索引从数组中删除项目：
const newList = this.state.list.splice(index, 1);
Removing item from array by value:
按值从数组中删除项目：
const newList = this.state.list.splice(this.state.list.indexOf(value), 1);
回答by Mosè Raguzzini
removeItem(item) {
const item = getItem(this.state.list, item.id) // Method to get item in list through comparison (IE: find some item with item.id), it has to return ITEM and INDEX in array
const newlist = [].concat(list) // Clone array with concat or slice(0)
newlist.splice(item.index, 1);
this.setState({list: newlist});
}
回答by Krasimir
I think you should pass the index of the item to your removeItemfunction. Like so:
我认为您应该将项目的索引传递给您的removeItem函数。像这样：
removeItem(index) {
const list = this.state.list;
list.splice(index, 1);
this.setState({ list });
}
render() {
return(
<div>
<h1>My Todo List</h1>
<h3>Add item</h3>
<input value={this.state.text} onChange={e => this.textChange(e)}/>
<button onClick={this.addToList}>+</button>
<ul>{
this.state.list.map((text, i) => {
return (
<li key={i}>
{text}
<button onClick={() => this.removeItem(i) }>-</button>
</li>
);
})}
</ul>
</div>
)
}
回答by yogesh agrawal
import React, { Component } from 'react';
import './Todo.css';
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
text: ''
}
this.textChange = this.textChange.bind(this);
this.addToList = this.addToList.bind(this);
}
textChange(e) {
this.setState({
text: e.target.value
})
}
addToList() {
this.setState(prevState => ({
list: prevState.list.concat(this.state.text),
text: ''
}))
}
removeItem(index) {
let newList = this.state.list.splice(index,1);
this.setState({list:newList})
}
render() {
return(
<div>
<h1>My Todo List</h1>
<h3>Add item</h3>
<input value={this.state.text} onChange={e => this.textChange(e)}/>
<button onClick={this.addToList}>+</button>
<ul>{this.state.list.map((x,y) => {
return <li key={y}>{x}
<button onClick={this.removeItem.bind(this,y)}>-</button>
</li>})}
</ul>
</div>
)
}
}
export default Todo;回答by Rick
I would pass the index of the item in the list on click then splice the array:
我会在单击时传递列表中项目的索引，然后拼接数组：
<ul>
{
this.state.list.map((x,y) => {
return (
<li key={y}>
{x}
<button onClick={() => this.removeItem(y)}>-</button>
</li>
);
})
}
</ul>
Then in removeItem:
然后在 removeItem 中：
removeItem(index) {
const list = this.state.list;
list.splice(index, 1);
this.setState({ list });
}
回答by gerald heng
_deleteTodo(index) {
console.log("delete " + index);
this.state.todos.splice(index, 1);
this.setState({
todos: this.state.todos.filter(i => i !== index)
});
}
I had a problem with splice and i honestly don know why. However this method work for me and you can try it! Ps. If anybody know why splice is not working with state and index please let me know i am curious!
我在拼接方面遇到了问题，老实说我不知道为什么。但是这个方法对我有用，你可以试试！附言。如果有人知道为什么 splice 不能使用状态和索引，请告诉我我很好奇！
