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

【问题标题】：Removing item from an array of items does not work从项目数组中删除项目不起作用
【发布时间】：2019-09-18 08:26:36
【问题描述】：

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

沙盒：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="xyz@example.com"
          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>
      </>
    );
  }
}

【问题讨论】：

but it does not seem to work 您应该已经注意到实际发生的事情并在您的问题中提到了这一点

标签： javascript reactjs ecmascript-6 setstate

【解决方案1】：

let filteredIDs = values.splice(index, 1); 从values 中删除后返回已删除的项目

你会想要的

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

在您的代码盒上测试并运行：p

【讨论】：

【解决方案2】：

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

您必须更改以下行。

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

用它代替上面的一个。

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

希望这对你有用。

【讨论】：

【解决方案3】：

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

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

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

替换

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

有

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

【讨论】：

【解决方案4】：

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

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

这应该可行。

【讨论】：

【解决方案5】：

您将删除的项目设置为新值。这将解决它。

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

};

【讨论】：

【解决方案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,
});

【讨论】：