javascript - 在 Axios 调用后设置状态后无法让 React 组件更新

Question

我有一个应该显示某些类别的 React 组件。我正在努力允许用户编辑类别。我显示一个表单，然后在 editCategory 中返回结果。然后，我正在对 Rails 后端进行 Axios 调用。 PUT 请求成功，但是当我尝试设置状态时，它仍在使用 PUT 请求之前的类别数据。所以 State 没有更新。

我已经尝试在 PUT 请求之后执行 GET 请求，然后尝试在 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

您同时执行放置和获取操作，因此不会获得更新的值。您可以使用异步等待

试试下面的代码

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