在反应中显示新闻api的所有结果

Question

我是 React 新手，我正在使用新闻 API 获取数据，我想显示所有结果，但我不知道该怎么做。我只能使用以下代码显示一个结果：

 if (country && data.cod !== '404')
 {
        const noa = data.totalResults
        console.log("the value is",noa)
        this.setState({
          Author: data.articles[0].author,
          Title: data.articles[0].title,
          Description: data.articles[0].description,
          Imageurl: data.articles[0].urlToImage,
          Publishedat: data.articles[0].publishedAt,
          Content: data.articles[0].content,
          error: ''
       })
 } 

 render() { 
    return (
      <div className='wrapper'>
         <Form getWeather={this.getWeather}>
            <Data
                Author={this.state.Author}
                Title={this.state.Title}
                Description={this.state.Description}
                Imageurl={this.state.Imageurl}
                Publishedat={this.state.Publishedat}
                Content={this.state.Content}
                error={this.state.error}
              />
          </Form>
       </div>
    );
  }
}

Answer 1

如果新闻 API 响应在一个数组中有多个项目，您将需要像这样重塑您的状态对象：

state = { articles: [] } // default state

然后您将使用setState 使用响应对象更新文章数组，如下所示：

this.setState({ articles: data.articles })

在您的渲染函数中，不是只显示一个<Data /> 组件，而是通过映射this.state.articles 来渲染多个，如下所示：

render() {
  return (
    <div className='wrapper'>
      <Form getWeather={this.getWeather} />
      {this.state.articles.map(article => (
        <Data
          key={/*use something unique like article id here*/}
          Author={article.author}
          Title={article.title}
          Description={article.description}
          Imageurl={article.urlToImage}
          Publishedat={article.publishedAt}
          Content={article.content}
        />
      ))}
    </div>
  )
}

应该这样做。