Javascript 将从API获取的数据设置为状态为赢得'；行不通

我正在尝试使用Django和ReactJS构建一个用于教育目的的新闻/文章网站

目前，我已经在Django中创建了一个文章模型，并为ReactJS设置了一个API。每篇文章都有标题、图像、内容、特色和快速阅读属性。特征和快速读取是布尔值。我已成功设置我的ReactJS组件以获取所有文章，但是，我在筛选包含

article.featured

为true和

article.quickreads

也为true的文章时遇到问题。目前我的组件有三种状态：文章、特色和快速阅读。这就是它目前的样子：

class Api extends React.Component{
  constructor(){
    super();
    this.state = {
      articles: null,
      featured: null,
      quickreads: null
    }
  }
  componentDidMount(){
    fetch("http://127.0.0.1:8000/articles/articlesapi/").then(request => request.json()).then(response => this.setState({articles: response}))
    var featured = this.state.articles.filter(article => article.featured === true)
    var quickreads = this.state.articles.filter(article => article.quickreads === true)
    this.setState({featured: featured, quickreads: quickreads})
  }
  render(){
    return (
      <p>Hello  World</p>
    )
  }
}

---

为什么会发生这种情况？

fetch

是异步的，因此当您尝试将

文章

过滤到设置状态时，它不会被设置（并且是

null

）。取而代之的是，等待数据被提取出来：

fetch("http://127.0.0.1:8000/articles/articlesapi/")
  .then(request => request.json())
  .then(response => {
    this.setState({
      articles: response
      featured: response.filter(article => article.featured === true),
      quickreads: response.filter(article => article.quickreads === true)
    });
  });

---

获取数据后，过滤并设置状态以及设置

文章

。不过，我只会将

文章

存储在状态中，并在需要时进行过滤，这样就不必同步所有数组以确保它们具有相同的数据。

此外，您不应该在状态中复制数据。为您的所有文章提供一个唯一的id，并且只将id添加到您的

特色

和

快速阅读

以引用文章。否则，当一篇文章发生更改时，您将发现自己必须更新多个位置。@trixn或只有一个数据源，并在需要时对其进行过滤。谢谢您的解决方案。但是，现在我在渲染函数中显示这些文章时遇到了问题。例如，当我执行{this.state.articles（article=>{article.headline}

）}时。但是，我得到了错误：意外标记，预期为（43:15），并指向this.state.article。有没有办法解决这个问题？@electro7912可能在某个地方出现了语法错误。你查过第43行第15列了吗。您可以在与问题无关但与代码相关的屏幕上查看代码：如果对象具有相同的属性和值名称，则可以减少键入对象的击键次数。因此，您可以不使用

this.setState（{featured:featured，quickreads:quickreads}）

而使用

this.setState（{featured，quickreads}）

fetch("http://127.0.0.1:8000/articles/articlesapi/")
  .then(request => request.json())
  .then(response => {
    this.setState({
      articles: response
      featured: response.filter(article => article.featured === true),
      quickreads: response.filter(article => article.quickreads === true)
    });
  });