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

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 => {&nbsp; let { values } = this.state;&nbsp; values.splice(index, 1);&nbsp; this.setState({&nbsp; &nbsp; values&nbsp; });经过测试并适用于您的代码和盒子：p

Answer 2

我认为您在删除项目时使用了错误的 javascript 方法。Splice方法通过删除或替换现有元素和/或添加新元素来更改数组的内容Slice方法将数组的一部分的浅拷贝返回到从开始到结束（不包括结束）选择的新数组对象中，其中开始和结束表示该数组中项目的索引。不会修改原始数组。代替&nbsp;let&nbsp;filteredIDs&nbsp;=&nbsp;values.splice(index,&nbsp;1);和&nbsp;let&nbsp;filteredIDs&nbsp;=&nbsp;values.slice(index,&nbsp;1);