我目前在一个项目中工作,我需要使用一个API来呈现内容。但是,如果用户更改语言,则需要再次发出请求。因此,为了动态实现此目的,我在URL的末尾插入了一个称为“ langPage”的状态(因为只有页面会在API上发生变化),如下所示:

componentDidMount(){
    let urlData = 'https://beta.estudiocru.com/wp-json/wp/v2/pages/'+ this.state.langPage;
    console.log(urlData);
    fetch(urlData)
    .then(response => response.json())
    .then(response => {
      this.setState({
        aboutContent: response,
      })
    });

    let logoURL = 'https://beta.estudiocru.com/' + this.state.lang + 'wp-json/wp/v2/acf/options';
    fetch(logoURL)
    .then(res => res.json())
    .then(res => {
      this.setState({
        options: res
      })
    });
  }


问题是,当状态更改时,获取不会更新,这是因为我正在componentDidMount上调用它。因此,我想知道当状态更新并在页面上重新呈现新内容时如何提出另一个请求。

我才刚开始反应。如果有人可以帮助我,我将不胜感激。

谢谢!!

最佳答案

您可以将获取移动到componentDidUpdate(),它将在每次状态或道具更改时起作用。

componentDidUpdate(prevProps, prevState, snapshot) {
   if(this.state.lang !== prevState.lang) {
       // fetch ...
   }
}

关于javascript - 在React中状态更新时动态更改获取请求的URL,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50728509/

10-09 09:48