Как вызвать ререндеринг после изменения json через fetch?

Question

[zwezew]

Если код выводит список из json с помощью вызова fetch в componentDidMount(), то как вызвать повторный рендер после любой модификации json через post, put и т.д.?

Comments

[Роман Александрович]

рендер происходит каждый раз как прилетают новые пропсы в компонент или же изменяется стейт. как вариант можете изменить какой нибудь нибудь ключ в стейте с true на false.

Answer 1

[Павло Пономаренко]

Когда пришли данные, которые вы запрашиваете при помощи fetch - занесите их в стейт, и рендерите от стейта. Что-то вроде такого:

class MyComponent extends React.Component {
  state = {
    loading: true,
    data: null
  }

 componentDidMount () {
    const data = await fetch(/* ... */);
    this.setState({ loading: false, data });
 }

 render () {
   const { data, loading } = this.state;

   if (loading) {
     return <div className='loading' />
   }

   return this.renderData(data);
 }
}

Comments

[zwezew]

Это при загрузке, а когда, например, удаляется элемент через апи фетч?
После удаления fetch("data/1", {method: 'delete'}) снова запускать fetch("data")?

[Павло Пономаренко]

zwezew, у вас в стейте есть данные - вот и меняйте их.

this.setState(s => ({
  data: s.data.filter(it => it.id !== deletedId)
}));

Answer 2

[Саша]

this.forceUpdate();