Список обновлений react после изменения через api

Я создал очень простой список в качестве упражнения, и теперь я пытаюсь выполнить над ним некоторые операции CRUD. Проблема в том, что когда я удаляю элемент, создается впечатление, что контейнер извлекает данные ДО фактического удаления элемента. Я использую Rails API с поддержкой, и с консоли я ясно вижу, что два вызова fetch перекрываются; сначала элементы загружаются, а затем элемент удаляется. Я попытался обернуть последнюю строку функции deleteItem из этого:

; this.fetchItems();

к этому:

.then(this.fetchItems());

но проблема все равно возникает, и я понятия не имею, почему.

Код упрощен для ясности:

Items.jsx (контейнер для сбора)

import Item from './Item'

class Items extends Component {
  state = { items: [] }

  fetchItems = () => {
    fetch('/api/v1/items')
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          items: responseJson
        });
      });
  }

  componentDidMount() {
    this.fetchItems();
  }

  deleteItem = (id) => {
    fetch('/api/v1/items/' + id, {
      method: 'DELETE',
      headers: { 'Content-Type' : 'application/json' }
    })
    .then(this.fetchItems());
  }

  render() {
    var items = this.state.items.map((item, idx) => {
      return <Item
                key={item.id} 
                itemName={item.name} 
                itemId={item.id} 
                onDelete={this.deleteItem} />
    });

    return (
      <div>
        {items}
      </div>
    );
  }
}

export default Items;

Item.jsx (фактический элемент)

class Item extends Component {
  state = { id: this.props.itemId, name: this.props.itemName }

  render() {
    return (
      <div onClick={() => this.props.onDelete(this.state.id)}>
        {this.state.name}
      </div>
    );
  }
}

export default Item;
0
0
512
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Попробуйте добавить вызов функции в then, как показано ниже

.then(() => this.fetchItems());

Извините за многие «я думаю», но сейчас я не рядом с компьютером, на котором могу проверить.

Не жалею, так как это сработало сразу; не могли бы вы объяснить немного подробнее? Почему функция была вызвана немедленно, если она находилась внутри блока then? Извините, но я действительно новичок в обещаниях и т. Д.

AlexanderD 11.04.2018 13:08

Затем вам нужно передать ему функцию, которую он вызовет, когда обещание разрешится. При передаче функции (обратного вызова) это не выполняется до тех пор, пока обещание не будет выполнено.

Andrew Rosewarn 11.04.2018 13:18

Извините, не закончил. Когда вы пишете this.fetchItems (), вы, по сути, выполняете этот код, а затем передаете его ему. Передавая функцию, вы предотвращаете выполнение, пока обещание не вызовет ее.

Andrew Rosewarn 11.04.2018 13:19

Спасибо, я, наверное, больше изучу эти причудливые стрелочные функции.

AlexanderD 11.04.2018 14:25

Это не обязательно должна быть стрела, я предпочитаю их, но вы могли бы сделать

Andrew Rosewarn 11.04.2018 14:57

.then (функция () {})

Andrew Rosewarn 11.04.2018 14:57

Другие вопросы по теме