Javascript 如何使用React Router的路由参数发出axios请求，然后根据响应更新状态？

我的应用程序组件中有以下路径：

<Route path ='/:id' component = {VideoPage} />

问题是，当我从componentDidUpdate中调用

this.setState

时，会得到一个无限循环

---

那么，您将如何执行此操作（使用来自ReactRouter和的参数进行API调用）？

您必须检查要在componentDidUpdate中跟踪的状态的更改，因为否则，当您在componentDidUpdate中调用setState时，它将触发更新并导致无限循环

我假设您希望在每次更改id状态时调用API。您可以使用componentDidUpdate的prevState参数，请参阅

您可以通过比较prevState和当前状态来检查状态，如下所示

componentDidUpdate(prevProps, prevState) {
  if (this.state.id !== prevState.id) {
    axios.get(getVideo(this.state.id))
        .then(res => {
            console.log(res)
            this.setState({
                mainVideo: res.data
            })
        })
        .catch(err => console.log(err))
  }
}

但componentDidUpdate是在发生更改后调用的，所以它不会在初始呈现中被调用，所以您也必须将API调用放在componentDidMount中

componentDidMount() {
  this.fetchVideo()
}

componentDidUpdate(prevProps, prevState) {
  if (this.state.id !== prevState.id) {
    this.fetchVideo()
  }
}

fetchVideo() {
  axios.get(getVideo(this.state.id))
        .then(res => {
            console.log(res)
            this.setState({
                mainVideo: res.data
            })
        })
        .catch(err => console.log(err))
}

---

什么是GetVidio？getVideo只是一个获取id并将其放入字符串的函数

componentDidMount() {
  this.fetchVideo()
}

componentDidUpdate(prevProps, prevState) {
  if (this.state.id !== prevState.id) {
    this.fetchVideo()
  }
}

fetchVideo() {
  axios.get(getVideo(this.state.id))
        .then(res => {
            console.log(res)
            this.setState({
                mainVideo: res.data
            })
        })
        .catch(err => console.log(err))
}