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

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="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>
      </>
    );
  }
}

Answer 1

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

您必须更改以下行。

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

用它代替上面的一个。

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

希望这对你有用。

Answer 2

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

中删除后删除的项目

你会想要

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

tested and works on your codesandbox :p

Answer 3

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

Splice method changes the contents of an array by removing or replacing existing elements and/or adding new elements

Slice method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included) where begin and end represent the index of items in that array. The original array will not be modified.

替换

 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 returns 已删除的元素，您正在设置已删除的元素。你可以直接做：

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,
});

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

Removing item from an array of items does not work

javascript

setstate

ecmascript-6

reactjs

代码