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

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

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

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

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

代替

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

和

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