Не удается получить компонент React для обновления после установки состояния после вызова Axios

Question

У меня есть компонент React, который должен отображать некоторые категории. Я работаю над тем, чтобы позволить пользователю редактировать категорию. Я отображаю форму, а затем получаю результаты обратно в editCategory. Затем я звоню Аксиосу на задний конец рельсов. Запрос PUT успешен, но затем, когда я пытаюсь установить setState, он все еще использует данные из тех категорий, которые были до запроса PUT. Таким образом, состояние не обновляется.

Я пытался выполнить запрос GET после запроса PUT, а затем пытался установить setState после результатов GET, но он все равно просто извлекает то состояние, которое было до запроса PUT. Хотя, если я обновлюсь, мои изменения будут. Так что бэкэнд работает.

class Categories extends React.Component { 
 state = { categories: [], toggleEditCat: false,  }

  componentDidMount() {
   axios.get(`/api/menus/${this.props.menuId}/categories`)
     .then( res => {
     this.setState({ categories:res.data })
    })
  }

componentDidUpdate() {
  this.render()
}

editCategory = (name, description, id) => {
 const category = { name, description}
 axios.put(`/api/menus/${this.props.menuId}/categories/${id}`, { 
 category })

 axios.get(`/api/menus/${this.props.menuId}/categories`)
  .then(res => {
   this.setState({ categories: res.data }, () => 
   console.log(this.state.categories))
 })
}  

}

render () {
 return (
  <Segment>
    <div>
      return this.state.categories.map(c => {
      return (
       <ul key={c.id}>
        <h3>Category Name: {c.name}</h3> 
       </ul>
      )
    </div>
  </Segment>
 )
}

Есть ли способ выполнить повторную визуализацию после этого запроса PUT, чтобы убедиться, что при выполнении второго запроса GET я получаю обновленные результаты? Я думал, что setState должен был повториться, но я думаю, что я что-то там упустил. Спасибо за любую помощь.

Answer 1

Вы одновременно выполняете как put, так и get, чтобы не получать обновленные значения. Вы можете использовать async await

Попробуйте с кодом ниже

editCategory = async (name, description, id) => {
 const category = { name, description}
 const updated = await axios.put(`/api/menus/${this.props.menuId}/categories/${id}`, {category });

 if(updated){
   axios.get(`/api/menus/${this.props.menuId}/categories`)
    .then(res => {
    this.setState({ categories: res.data }, () => 
     console.log(this.state.categories));
    });
  }  
}

Answer 2

Вы не дожидаетесь, пока закончится PUT, прежде чем GET

editCategory = (name, description, id) => {
  const category = { name, description}
  axios.put(
    `/api/menus/${this.props.menuId}/categories/${id}`, 
    { category }
  ).then(() => { // when put is finished, the fire get
    axios.get(`/api/menus/${this.props.menuId}/categories`)
      .then(res => {
        this.setState({ categories: res.data })
      })
  })
}

РЕДАКТИРОВАТЬ: на самом деле лучше написать его в виде правильной цепочки обещаний вместо вложенных обещаний:

editCategory = (name, description, id) => {
  const category = { name, description}
  axios.put(
    `/api/menus/${this.props.menuId}/categories/${id}`, 
    { category }
  ).then(() => { // when put is finished, the fire get
    return axios.get(`/api/menus/${this.props.menuId}/categories`)
  }).then(res => {
    this.setState({ categories: res.data })
  })
}