Question

在我的应用中，有一个Header导入到组件的顶部，其中包含3个链接下拉列表。在我的网站上的所有地方，这些下拉列表都起作用，除了一个下拉列表在将prop id传递给路由器的页面上不起作用之外。

发生问题的路线：

<Route path="/service/:name" render={(props) => <ServiceShow {...props} />}/> 
<Route path="/employee/:userId" render={(props) => <EmployeeShow {...props} />}/> 
<Route path="/class/:id" render={(props) => <ClassShow {...props} />}/>

以下代码是下拉代码。 this.fetchCategories()和this.fetchClasses()返回正确的信息。通过添加日志，问题出在fetchCatefories()函数中，该调用永远不会到达API，而只会出现在上述路由上。我想我正在做的事情与React的工作方式背道而驰，但是很沮丧。

componentWillMount() {
  this.fetchEmployees()
  this.fetchCategories()
  this.fetchClasses()
}


fetchCategories = async() => {
  const response = await fetch(`/api/categories`)
  const initialCategories = await response.json()
  const services = initialCategories
  this.setState({
    services
  })

}
fetchClasses = async() => {
  console.log("^^^^^^^^^^^^^^1Clases IN HEADER")
  const response = await fetch(`/api/classes`)
  const initialClass = await response.json()
  const classes = initialClass
  console.log("^^^^^^^^^^^^^^Clases IN HEADER", classes)
  this.setState({
    classes
  })
}

fetchEmployees = async() => {
  console.log("^^^^^^^^^^^^^^1Employee IN HEADER")
  const response = await fetch(`employees`)
  console.log("^^^^^^^^^^^^^^2Employee IN HEADER", response)
  const initialUser1 = await response.json()
  console.log("^^^^^^^^^^^^^^3EMPLYEES IN HEADER", initialUser1)
  const employees1 = initialUser1
  console.log("^^^^^^^^^^^^^^EMPLYEES IN HEADER", employees1)
  this.setState({
    employees: employees1
  })
}

反应不只在带有道具的路线上进行API调用

0 个答案: