У меня есть следующий маршрут в моем компоненте приложения:
<Route path ='/:id' component = {VideoPage} />
При посещении этого маршрута я хочу, чтобы компонент VideoPage использовал параметр :id для выполнения запроса axios к API, а затем я хочу обновить состояние VideoPage и отобразить информацию, которую возвращает API.
Это то, что я сейчас делаю в компоненте VideoPage, который не работает:
export default class VideoPage extends Component {
constructor(props){
super()
this.state = {
id: props.match.params.id,
mainVideo: defaultVideo
};
}
componentDidUpdate(){
axios.get(getVideo(this.state.id))
.then(res => {
console.info(res)
this.setState({
mainVideo: res.data
})
})
.catch(err => console.info(err))
}
render() {
// render several components, passing them pieces of state from this component
}
Проблема в том, что когда я вызываю this.setState
из componentDidUpdate, я получаю бесконечный цикл.
Итак, как бы вы это сделали (сделав вызов API, используя параметры из ReactRouter и )?
getVideo — это просто функция, которая берет идентификатор и помещает его в строку.
Вы должны проверить изменение состояния, которое вы хотите отслеживать, в componentDidUpdate, потому что в противном случае, когда вы вызываете setState в componentDidUpdate, это вызовет обновление и вызовет бесконечный цикл.
Я предполагаю, что вы хотите вызывать API каждый раз, когда изменяется состояние идентификатора. Вы можете использовать параметр prevState компонентаDidUpdate, перейдите по этой ссылке
Вы можете проверить состояние, сравнив prevState с текущим состоянием, как это
componentDidUpdate(prevProps, prevState) {
if (this.state.id !== prevState.id) {
axios.get(getVideo(this.state.id))
.then(res => {
console.info(res)
this.setState({
mainVideo: res.data
})
})
.catch(err => console.info(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.info(res)
this.setState({
mainVideo: res.data
})
})
.catch(err => console.info(err))
}
Что такое GetVedio?