Question

我正在学习react，我在youtube上发现了一个使用新闻API创建PWA的视频，我决定我将尝试使用react来复制它，因为他的视频只是在Vanilla JS中学习，如果我学到一点东西，我会容易一些建造东西。

新闻API上有消息来源和文章API。

文章：

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

来源：

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

我创建了一个选择框，其中包含来自源api的源，并且通过更新选择框中URL中的源来获取新闻。我已经设法使选择框将其值设置为onchange状态，但我无法通过NewsItem组件来更改文章url中的源。

我在这里https://codepen.io/crash1989/pen/JZLQxr放置了一个代码笔，它与我的代码方式略有不同，因为我不想手动发布API密钥而不得不手动创建源和新闻。

看到componentDidMount的地方，我正在使用async/await函数从API中获取数据并将其置于状态。

在我的实际代码中，我想为文章https://newsapi.org/v1/articles?source=${this.state.source}&apiKey=${API_KEY}

提供一个这样的网址

所以最重要的是，我需要帮助将选择框值放入NewsItem组件中以更新我的新闻。

Answer 1

您的应用程序是这样构建的

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

您在<Nav />中选择一个值并将其传递给<News />。为此，您应该将值存储在App状态下，然后将值和changeHandler作为属性传递给子级。

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>
       )
   }
}

在更改时使用选择框反应更新URL

1 个答案: