как обновить массив объектов в состоянии реакции на основе идентификатора

Question

Я новый учиться реагировать. У меня есть учебный случай с базовым c операция (CRUD) в реакции. я создаю приложение для сохранения реагирования на расходы или доходы CRUD.

У меня есть три компонента: InputData для входных данных, TotalMoney для отображения общих денег, расходов и доходов и таблица для отображения всех данных.

* nb pemasukan = доход, pengeluaran = расходы, джумла = сумма

пример таких данных

this.state: {
    items: [
               {id:1, tipe:"pemasukan", jumlah:20000},
               {id:1, tipe:"pemasukan", jumlah:20000}
           ]
}

это изображение

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

Каков наилучший способ обновления данных в этом случае исследования?

это моя функция для обновления данных

updateItem = event => {
    event.preventDefault();
    const updatedTipe = this.state.tipe;
    const updatedJumlah = parseInt(this.state.jumlah);
    const updatedJudul = this.state.judul;
    const updatedItems = Object.assign({}, this.state.items, {
      tipe: updatedTipe,
      jumlah: updatedJumlah,
      judul: updatedJudul
    });
    console.log(updatedItems);
    const itemLists = this.state.itemLists.map(itemList =>
      itemList.id === this.state.items.id ? updatedItems : itemList
    );
    console.log(itemLists);
    this.setState({ jumlah: 0, judul: "", itemLists: itemLists });
    this.setEditing(false);
  };

это таблица объявлений во входных данных компонента

<Table
  items={items}
  itemLists={itemLists}
  editing={editing}
  editItem={this.editItem}
  tipe={tipe}
  jumlah={jumlah}
  judul={judul}
  setEditing={this.setEditing}
  deleteItem={this.deleteItem}
  onChange={this.onChange}
  updateItem={this.updateItem}
/>

это входное значение для данных обновления

<tr className="rowHover">
<td>
                <select
                  className="form-control form-table"
                  name="tipe"
                  onChange={props.onChange}
                >
                  <option>Pilih</option>
                  <option value="pengeluaran">Pengeluaran</option>
                  <option value="pemasukan">Pemasukan</option>
                </select>
              </td>

              <td>
                <input
                  type="number"
                  className="form-control form-table"
                  name="jumlah"
                  value={props.jumlah}
                  onChange={props.onChange}
                />
              </td>

              <td>
                <input
                  type="text"
                  className="form-control form-table"
                  name="judul"
                  value={props.judul}
                  onChange={props.onChange}
                />
              </td>

              <td>
                <button
                  onClick={props.updateItem}
                  type="button"
                  className="btn btn-success buttonStyles"
                >
                  Update
                </button>
                <button
                  onClick={() => props.setEditing(false)}
                  type="button"
                  className="btn btn-warning buttonStyles"
                >
                  Cancel
                </button>
              </td>
            </tr>

это состояние

this.state = {
      id: null,
      judul: "",
      tipe: "",
      jumlah: 0,
      pengeluaran: 0,
      pemasukan: 0,
      totalUang: 0,
      items: {},
      itemLists: [],
      editing: false
    };

это мой код https://github.com/saldhyyoga/test

Answer 1

Я запустил ваш код, чтобы увидеть, в чем проблема, и нашел решение, которое работает. Вы должны сделать 2 обновления: - первое тоже сохраняет идентификатор обновленного элемента

  editItem = item => {
    this.setState({
      editing: true,
      id: item.id, // add this line
      jumlah: item.jumlah,
      tipe: item.tipe,
      judul: item.judul
    });
  };

• второе - получить доступ к данным отредактированного элемента на основе постоянного идентификатора

updateItem = event => {
    event.preventDefault();
    const updatedTipe = this.state.tipe;
    const updatedJumlah = parseInt(this.state.jumlah);
    const updatedJudul = this.state.judul;
    const updatedId = this.state.id; // take edited item id
    const updatedItems = Object.assign({}, this.state.items[updatedId], { // access the information of the editem item
      tipe: updatedTipe,
      jumlah: updatedJumlah,
      judul: updatedJudul
    });
    console.log(updatedItems);
    const itemLists = this.state.itemLists
      .map(itemList =>
        itemList.id === this.state.id ? updatedItems : itemList // replace this.state.items.id with this.state.id
      );
    console.log(itemLists);
    this.setState({ jumlah: 0, judul: "", itemLists: itemLists });
    this.setEditing(false);
  };

Здесь - это ссылка, где вы можете найти обновленное решение, которое работает, как ожидалось.

Редактировать Для того, чтобы зафиксировать суммы Вычисление просто вызвать функцию amount в конце функции updateItem:

  updateItem = event => {
    event.preventDefault();
    const updatedTipe = this.state.tipe;
    const updatedJumlah = parseInt(this.state.jumlah);
    const updatedJudul = this.state.judul;
    const updatedId = this.state.id;
    const updatedItems = Object.assign({}, this.state.items[updatedId], {
      tipe: updatedTipe,
      jumlah: updatedJumlah,
      judul: updatedJudul
    });
    console.log(updatedItems);
    const itemLists = this.state.itemLists.map(itemList =>
      itemList.id === this.state.id ? updatedItems : itemList
    );
    console.log(itemLists);
    this.setState({ jumlah: 0, judul: "", itemLists: itemLists });
    this.setEditing(false);
    this.amount(itemLists); // add this line
  };

Вы также можете найти обновление по той же ссылке