在 Axios 调用后设置状态后无法更新 React 组件答案

【问题标题】：Can't get React component to update after setting state after Axios call在 Axios 调用后设置状态后无法更新 React 组件
【发布时间】：2019-01-18 21:17:26
【问题描述】：

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

我尝试在 PUT 请求之后执行 GET 请求，然后在 GET 结果之后尝试 setState，但它仍然只是提取 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 应该重新渲染，但我认为我在那里遗漏了一些东西。感谢您的帮助。

【问题讨论】：

标签： javascript ruby-on-rails reactjs axios

【解决方案1】：

您同时进行 put 和 get 操作，因此您不会获得更新的值。你可以使用异步等待

试试下面的代码

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

【讨论】：

你不能在没有async的情况下使用await（缺少async关键字）
我不好，我在函数名之前添加了它。

【解决方案2】：

您不会在GET 之前等待您的PUT 完成

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

【讨论】：