从反应js中的对象数组中删除一个元素答案

【问题标题】：Remove an element from an array of objects in react js从反应js中的对象数组中删除一个元素
【发布时间】：2018-09-26 18:48:29
【问题描述】：

我是反应 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];

【问题讨论】：

标签： javascript arrays reactjs react-redux

【解决方案1】：

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

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

将数组存储在哪里都没有关系（state、redux 存储等）。

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

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"/>

【讨论】：

其实我的状态里没有我的数据。
没关系。无论您在哪里管理数据，过滤器都是一种删除项目的方法。

【解决方案2】：

您需要为子组件提供一个处理程序以及数组值。这个处理程序将更新 redux 存储中的数据

动作

const handleRemove =(id) => {
    return {
        type: 'REMOVE',
        id
    }
}

减速器：

const ArrayItem =  (state, action) => {
    switch(action.type) {
        case 'REMOVE': return state.filter(item => item.Id !== action.id);
        default: return state;
    }
}

孩子

onRemove = (id) => {
    this.props.handleRemove(id)
}

【讨论】：

真的很抱歉，但是这个数组没有状态。
数组作为道具从哪里传到孩子。
实际上我已经在商店里有它，所以我从那里拿它就像从 mapStateToProps 一样。
在这种情况下，您需要调度一个操作，以更新商店中的状态
是的，我必须调度一个动作，但首先我想删除该元素，然后我将获取该数组，然后我将再次使用该数组更新存储。