如何在componentDidMount中生成带有状态的动态url？

Question

我想在 componentDidMount 中使用 {this.state.whatever} 动态化 URL，但失败了。因为状态值是未定义的（我运行了console.log，错误也显示出来了）

我认为componentDidMount在状态重置后运行，所以我可以在URL中使用更新的状态但不起作用，我想知道为什么

state={ breed: "" }
async componentDidMount(){
   try {
       const res = await 
       fetch(`https://dog.ceo/api/breed/${this.state.breed}/images`);
       const data = await res.json();
       const imageUrl = data.message;
       this.setState({
         puppyImage: imageUrl
       })

   } catch (error) {
     console.log(error);
   }
 }

 onChangeHandler = event => {
   this.setState({breed: event.target.value})
 };

此 URL 不起作用，因为 {this.state.breed} 未定义，这意味着它尚未更新。 错误显示： GET https://dog.ceo/api/breed//images 404

Answer 1

componentDidMount() 只会在组件渲染后运行单次时间，并且永远不会再次运行。

您应该改用componentDidUpdate()，它会在组件获得更新的状态或道具时触发。在其中，您可以配置逻辑以确定是否应该创建一个新的fetch。

componentDidUpdate(prevProps, prevState){
   if(prevState.breed !== this.state.breed){
     try {
       const res = await 
       fetch(`https://dog.ceo/api/breed/${this.state.breed}/images`);
       const data = await res.json();
       const imageUrl = data.message;
       this.setState({
         puppyImage: imageUrl
       })

     } catch (error) {
       console.log(error);
     }
   }
 }

假设你做了一些改变this.state.breed的事情。上面定义的componentDidUpdate() 逻辑将触发然后检查它们是否是先前品种状态和更新品种状态之间的差异。如果有，则使用该品种进行新的 fetch-call，您将获得新的 puppyImage :)。