Удалить элемент из массива объектов в реагировать JS

Question

Я новичок в реакции Js.Я хочу удалить элемент из массива.,

У меня есть массив, подобный,

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

Итак, теперь у меня есть то, что это значение в this.props.array.

Здесь я получаю идентификатор, который я должен удалить, так как можно сравнить этот идентификатор объекта массива и удалить этот конкретный.

Потому что я не хочу изменять этот массив.

Заранее спасибо.

onRemoveRow(e, id) {

    }

Для добавления

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

Answer 1

Вам необходимо предоставить обработчик для дочернего компонента вместе со значениями массива.Этот обработчик будет обновлять данные в хранилище приставок

Действие

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

Answer 2

Вы можете использовать фильтр для возврата нового массива без соответствующего элемента:

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

Неважно, где вы храните массив (state, избыточное хранилище и т. Д.).

Вот небольшой пример добавления и удаления элементов из массива в состоянии:

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