Question

我正在尝试构建一个新闻应用程序，以显示每个国家/地区的前20条报道。但是，我尝试将setState调用放入循环中，但是我很快意识到它们已被覆盖，唯一可以显示的是最后一个。我想知道如何在不覆盖以前的条目的情况下实现这一目标。预先谢谢你！

//the following code is inside my App.js file and inside the App component
getNews = async (e) => {
e.preventDefault();
const country = e.target.elements.country.value;
const api_call = await fetch(this.buildURL(country));
const data = await api_call.json();

  if (country) {
    console.log(data);

    //i changed this to just display the first article out of 20
    this.setState({
        title: data.articles[0].title,
        image: data.articles[0].urlToImage,
        description: data.articles[0].description,
        author: data.articles[0].author,
        link: data.articles[0].url,
        err: ""
    });
  }
  else {
    this.setState({
      title: undefined,
      image: undefined,
      description: undefined,
      author: undefined,
      link: undefined,
      err: "Please enter valid country"
    });
  }


}

  render() {
      return(
      <div>
        <Titles />
        <Form getNews={this.getNews}/>
        <News title={this.state.title}
              image={this.state.image}
              description={this.state.description}
              author={this.state.author}
              link={this.state.link}
              err={this.state.err}
        />
      </div>
    );
    }

这是一个初学者项目，所以请记住这一点。

Answer 1

因此，您要包括所有处于新闻状态的新闻项，然后将其循环并为每个新闻项创建一个News元素。这样的请求：

getNews = async e => {
  e.preventDefault();
  const country = e.target.elements.country.value;
  if (!country) {
    this.setState({
      articles: null,
      err: "Please enter valid country"
    });
  }
  let data;
  try {
    data = await fetch(this.buildURL(country)).then(res => res.json());
  } catch (error) {
    this.setState({
      articles: null,
      err: "Please enter valid country"
    });
  }
  if (data) {
    this.setState({
      articles: data.map(article => ({
        title: article.title,
        image: article.urlToImage,
        description: article.description,
        author: article.author,
        link: article.url
      }))
    });
  }
};

尽管我不保证它没有错误！

然后，当所有文章都处于状态时，可以遍历它们：

render() {
  return (
    <div>
      <Titles />
      <Form getNews={this.getNews} />

      {this.state.articles.map(article => (
        <News
          title={article.title}
          image={article.image}
          description={this.state.description}
          author={article.author}
          link={article.link}
          err={article.err}
        />
      ))}
    </div>
  );
}

或者，如果您知道存储在状态中的对象键名称与新闻组件期望的完全匹配，则可以像这样传播道具：

  {this.state.articles.map(article => (
    <News {...article}/>
  ))}

Answer 2

您的状态应该有一个数组，而不仅仅是提供一个对象。

this.setState({
    title: data.articles[0].title,
    image: data.articles[0].urlToImage,
    description: data.articles[0].description,
    author: data.articles[0].author,
    link: data.articles[0].url,
    err: ""
});

应更改为以下内容。

var articles = this.state.articles.slice();
var newArticle = {
    title: data.articles[0].title,
    image: data.articles[0].urlToImage,
    description: data.articles[0].description,
    author: data.articles[0].author,
    link: data.articles[0].url,
    err: ""
};
articles.push(newArticle);

this.setState(articles);

还要注意，setState是异步的。因此有时，您应该使用现有状态来确定状态的新值。请参阅setState documentation

setState很多项目React

2 个答案: