Javascript 在更改时使用selectbox响应更新url

我正在学习react，我在youtube上发现了一个视频，有人使用新闻api创建了一个PWA，我决定尝试使用react复制它，因为他的视频只是在vanilla JS中，如果我构建一些东西，我会学到一些更简单的东西

在新闻API上有一个sources和一个articles API

文章：

https://newsapi.org/v1/articles?source=bbc-news&apiKey=${API_KEY}

资料来源：

https://newsapi.org/v1/sources?language=en

我已经创建了一个选择框，其中包含来自sources api的源代码，我通过从选择框更新URL中的源代码来获取新闻。我已经设法让选择框在更改时将其值置于状态，但我无法让

新闻项

组件更改文章url中的源代码

我在这里放了一个代码笔，它与我的代码有点不同，因为我不得不手动创建源代码和新闻，因为我不想发布我的API密钥

您可以看到

componentDidMount

我正在使用

async/await

函数从API获取数据并将其置于状态

在我的实际代码中，我希望为文章

https://newsapi.org/v1/articles?source=${this.state.source}&apiKey=${API\u KEY}

---

因此，底线是我需要帮助将选择框值放入

新闻项目
组件以更新我的新闻。
您的应用程序是这样构建的

<App>
  <Nav />
  <News />
</App>



您在
中选择一个值，并希望将其传递给
。您应该将值存储在App的状态中，并将值和changeholder作为属性传递给子级

class App extends Component {
   constructor(props) {
      this.state = {
         source: "BBC News"
      }
   }

   setSource = source => {
      this.setState({source})
   }

   render() {
       let {source} = this.state
       return (
           <div>
               <Nav source={source} setSource={this.setSource} />
               <News source={source} />
           </div>
       )
   }
} 

类应用程序扩展组件{
建造师（道具）{
此.state={
资料来源：“BBC新闻”
}
}
setSource=source=>{
this.setState（{source}）
}
render（）{
设{source}=this.state
返回(
)
}
} 
我不确定我是否正确理解了您的问题，而且很难从代码笔中分辨出来，因为它与您的原始代码不同，但您可能希望在从请求中获得结果时更新组件的状态。如果您已经这样做了，您可以尝试发布您的原始代码。