Question

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

我有一个类似的数组，

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

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

在这里，我获得了应该删除的ID，那么如何比较该数组对象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存储等）都无关紧要。

以下是一个正在运行的小示例，该示例在状态为的阵列中添加和删除项目：

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

Answer 2

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

动作

FAQPage

减速器：

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

从React JS中的对象数组中删除元素

2 个答案: