Question

我有一个应该显示一些类别的React组件。我正在努力允许用户编辑类别。我显示一个表单，然后将结果返回到<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" exclude-result-prefixes="#all" version="2.0"> <xsl:strip-space elements="*"/> <xsl:output method="text"/> <xsl:template match="seq[every $i in tokenize(@value, ',\s+') satisfies $i castable as xs:integer]"> <xsl:variable name="items" select="for $item in tokenize(@value, ',\s+') return xs:integer($item)"/> <xsl:if test="every $p in 1 to count($items) satisfies $items[$p] = $items[1] + ($p - 1)"> <xsl:value-of select="@name"/><xsl:text> is an ascending numeric sequence </xsl:text> </xsl:if> </xsl:template> </xsl:stylesheet>中。然后，我要向Rails后端进行Axios调用。 PUT请求成功，但是当我尝试setState时，它仍在使用PUT请求之前的类别数据。因此状态不会更新。

我尝试在PUT请求之后执行GET请求，然后尝试在GET结果之后设置setState，但是它仍然只是拉取PUT请求之前的状态。尽管如果刷新，我的更改就在那里。因此后端正在运行。

// Bootstrap 4
bootstrap: { 
    'xs': $('<div class="device-xs d-block d-sm-none">xs</div>'), 
    'sm': $('<div class="device-sm d-none d-sm-block d-md-none">sm</div>'),
    'md': $('<div class="device-md d-none d-md-block d-lg-none">md</div>'),     
    'lg': $('<div class="device-lg d-none d-lg-block d-xl-none">lg</div>'), 
    'xl': $('<div class="device-lg d-none d-xl-block">xl</div>') 
}

在该PUT请求之后，是否有一种方法可以重新呈现，以确保当我发出第二个GET请求时，我得到的是更新的结果？我以为editCategory应该重新呈现，但是我认为那里缺少什么。感谢您的帮助。

Answer 1

您不必等待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 })
      })
  })
}

编辑：将其编写为适当的promise链而不是嵌套promise实际上更好：

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

Answer 2

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

尝试以下代码

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

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

2 个答案: