javascript - 从 react js中的对象数组中删除一个元素

Question

我是 React Js 的新手。我想从数组中删除一个元素。，

我有一个类似的数组，

array = [{ Id: "L0", value="asas"}]

所以，现在我所拥有的是这个值在 this.props.array 中。

在这里我得到了我应该删除的 id，那么如何比较那个数组对象 Id 并删除那个特定的。

因为我不想改变那个数组。

提前致谢。

onRemoveRow(e, id) {

    }

用于添加，

 const tempObj = {
                id: 'L' + id,
                technologyId: 0,
                technology: '',
                type: '',
                numberOfQuestions: ''
            }
            const addData = [...this.props.lowData.Low, tempObj];

Answer 1

您可以使用过滤器返回一个排除了相关项目的新数组:

const newArray = items.filter(item => item.id !== id)

将数组存储在何处并不重要(state、redux store 等)。

这是一个在状态数组中添加和删除项的小运行示例:

class Item extends React.Component {
  remove = () => {
    const { id, onRemove } = this.props;
    onRemove(id);
  };

  render() {
    const { text } = this.props;
    return (
      <div style={{ display: "flex" }}>
        <button onClick={this.remove}>Remove</button>
        <div>{text}</div>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    items: [
      { id: 1, text: "item 1" },
      { id: 2, text: "item 2" },
      { id: 3, text: "item 3" }
    ]
  };

  addItem = () => {
    this.setState(state => {
      const { items } = state;
      const newId = uuid();
      const newItem = { id: newId, text: `item ${newId}` };
      return {
        items: [...items, newItem]
      };
    });
  };

  onItemRemove = itemId => {
    this.setState(state => {
      const { items } = state;
      const filteredItems = items.filter(item => item.id !== itemId);
      return {
        items: filteredItems
      };
    });
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        <div>
          <button onClick={this.addItem}>Add Item</button>
          <hr />
        </div>
        {items.map(item => (
          <Item
            key={item.id}
            id={item.id}
            text={item.text}
            onRemove={this.onItemRemove}
          />
        ))}
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.js"></script>

<div id="root"/>