从项目数组中删除项目不起作用

Question

我正在尝试从项目列表中删除一个项目，但它似乎不起作用。我有一个页面，我可以在其中动态添加条目，也可以单独删除项目。添加似乎工作正常。

沙盒：https://codesandbox.io/s/angry-heyrovsky-r7b4k

法典

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
value: "",
values: []
};
}
onChange = event => {
this.setState({ value: event.currentTarget.value });
};
onAdd = () => {
this.setState({
value: "",
values: [...this.state.values, this.state.value]
});
};
onRemove = index => {
console.log(index);
let { values } = this.state;
let filteredIDs = values.splice(index, 1);
this.setState({
values: filteredIDs
});
};
render() {
let { values, value } = this.state;
return (
<>
<input
required
placeholder="[e-mail]"
value={value}
onChange={this.onChange}
/>
<button onClick={this.onAdd}>Add</button>
<div>
<ul className="email-list-holder wd-minus-150">
{values.map((value, index) => (
<li key={index}>
{value}
<button
onClick={() => this.onRemove(index)}
style={{ cursor: "pointer" }}
>
Remove
</button>
</li>
))}
</ul>
</div>
</>
);
}
}

Answer 1

let filteredIDs = values.splice(index, 1);

从values中删除后返回已删除的项目

你会想要

onRemove = index => {
let { values } = this.state;
values.splice(index, 1);
this.setState({
values
});

经过测试并适用于您的代码沙盒:p

Answer 2

这是您的
工作演示 https://codesandbox.io/s/purple-snow-kkudc

您必须更改以下行。

let filteredIDs = values.splice(index, 1);

使用它而不是上面的一个。

let filteredIDs = values.filter((x, i)=> i!==index);

希望这对你有用。

Answer 3

我认为您在删除该项目时使用错误的javascript方法。

拼接方法通过删除或替换现有元素和/或添加新元素来更改数组的内容

Slice 方法将数组的一部分的浅拷贝返回到从头到尾选择的新数组对象(不包括结束(，其中 begin 和 end 表示该数组中项的索引。不会修改原始数组。

取代

let filteredIDs = values.splice(index, 1);

跟

let filteredIDs = values.slice(index, 1);

Answer 4

您正在设置数组的已删除部分而不是正确的部分。

onRemove = index => {
console.log(index);
let { values } = this.state;
values.splice(index, 1);
this.setState({
values
});
};

这应该有效。

Answer 5

将删除的项目设置为新值。这将修复它。

onRemove = index => {
console.log(index);
let { values } = this.state;
let filteredIDs = values.splice(index, 1);
this.setState({
values: values
});

};

Answer 6

splice返回已删除的元素，并且您正在设置已删除的元素。您可以直接执行以下操作：

values.splice(index, 1);
this.setState({
values,
})

您还可以使用uniqueId为每个新元素提供一个uniqueId这将有助于过滤逻辑。

以下是我可能如何构建状态和方法：

this.state = {
values: {
todo1: {
value: 'a'
},
todo2: {
value: 'b'
},
}
}

// Addition
this.setState({
values: {
...this.state.values,
uniqueId: {
value: 'New Value from input'
}
}
});

// Deletion
const stateValues = this.state.values;
delete stateValues[uniqueId];
this.setState({
values: stateValues,
});