Reactjs 基于api获取的react重渲染组件

我正在构建一个单页网站，现在我正在从一个不同类型的电影API获取数据，我在componentDidMount（）上完成了这项工作，这是它第一次工作，我在没有刷新的情况下获取数据（电影） 问题是，当我切换到另一种类型（电影仍然是一样的）时，组件不会重新渲染，只有在将其更改刷新到另一种类型的电影时，有没有办法在不刷新的情况下重新渲染？ 有人可以向我解释如何以及何时使用componentDidUpdate（）

Search.js:
常数genresId={
行动：‘28’，
动画片:"16",，
喜剧:"35",，
冒险：“12”
}
导出类搜索扩展组件{
建造师（道具）{
超级（道具）；
此.state={
体裁：“，
标题：this.props.match.params.genre
}
this.checkgreen=this.checkgreen.bind（this）；
}
检查类型（）{
const whichGenre=this.props.match.params.genre；
让温度；
如果（whichGenre==='action'）{
this.setState（{genre:genresId.Action}）；
温度=热残余作用；
}else if（whichGenre===‘动画’）{
this.setState（{genre:genresId.Animation}）
temp=genresId.Animation；
}else if（哪种类型==‘喜剧’）{
this.setState（{流派：genresti.喜剧}）
temp=喜剧；
}else if（whichGenre===‘冒险’）{
this.setState（{genre:genresId.Adventure}）
temp=genresId.Adventure；
}
返回温度
}
render（）{
返回(
{this.state.title}电影
)
}
}
SearchResult.js：
导出类SearchResult扩展组件{
建造师（道具）{
超级（道具）；
此.state={
moviesArray:[]，
页码：1，
孤岛加载：正确
}
}
异步组件didmount（）{
设urlWithParams=`${baseUrl}&page=${this.state.page}&with_genres=${this.props.checkGenre（）}`
const response=wait axios.get（urlWithParams）
this.setState（{moviesArray:response.data.results，isLoading:false}）
console.log（this.state.moviesArray）
}
//异步组件更新（prevProps、prevState）{
//if（prevProps.genre！==此.props.genre）{
//         // ...
//     }
// }
checkIfDataAvailable（）{
如果（！this.state.isLoading）{
返回(
{this.state.moviesArray.map（movie=>
)}
)
}否则{
返回(
{console.log（'正在加载…'）}
)
}
}
render（）{
返回(
{this.checkIfDataAvailable（）}
)
}
}

componentDidMount

在响应式更新时不会重新加载。你会想做你的取回代替。您可能希望在获取之前检查类型是否已更改，以防有其他可能导致更新的反应性更改。大概是这样的：

async componentDidUpdate(prevProps) {
  if (this.props.genre !== prevProps.genre) {
    let urlWithParams = `${baseUrl}&page=${this.state.page}&with_genres=${this.props.genre}`
    const response = await axios.get(urlWithParams)
    this.setState({moviesArray: response.data.results, isLoading: false})
    console.log(this.state.moviesArray)
  }
}

---

可能是因为我使用的是route params？在获取数据的代码中，您没有在任何地方使用

this.prop.genre

。我想这就是问题所在。我只在这两个文件中使用这个.prop.genre。我真的看不出我做错了什么（仍然是新的反应）。还有一个问题，您如何看待checkgreen（）函数？我如何重构它？我在我的帖子中对代码做了一个我认为有意义的修改（直接使用

props.genre

，而不是调用父函数）。你能试试这个吗？另一个问题：你在哪里设置了流派？仍然不起作用。我在Search.js文件中设置了流派。我想我对checkgreen（）函数有问题。如果我使用this.state.genre它不工作，则genre状态为空，这就是为什么我使用temp变量，因为setState是异步的

async componentDidUpdate(prevProps) {
  if (this.props.genre !== prevProps.genre) {
    let urlWithParams = `${baseUrl}&page=${this.state.page}&with_genres=${this.props.genre}`
    const response = await axios.get(urlWithParams)
    this.setState({moviesArray: response.data.results, isLoading: false})
    console.log(this.state.moviesArray)
  }
}