Question

我目前正在一个项目中工作，我需要使用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
      })
    });
  }

问题是，当状态改变时，fetch不会更新，这是因为我在componentDidMount上调用它。所以我想知道当状态更新并重新呈现页面上的新内容时，我怎么能再发出一个请求。

我刚开始做出反应。如果有人可以帮助我，我会非常感激。

谢谢！

Answer 1

你可以将fetch移动到componentDidUpdate()，每当状态或道具改变时它都会起作用。

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

在React中进行状态更新时动态更改获取请求URL

1 个答案: