javascript – 从状态API设置提取的数据将不起作用

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

目前,我在Django中创建了一个文章模型,并为ReactJS设置了一个API来与之交谈.每篇文章都有标题,图片,内容,精选和快速阅读属性.特色和快速读取是布尔值.我已经成功设置了我的ReactJS组件来获取所有文章,但是我无法过滤那些有article.featured为true且article.quickreads也是如此的文章.目前我的组件有三种状态：文章,精选和快速阅读.这是它目前的样子：

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

虽然该组件获得了所有文章,但它无法更新特色和快速阅读.我收到以下错误：

Uncaught TypeError: Cannot read property 'articles' of undefined at componentDidMount (eval at <anonymous>)...

为什么会这样？

解决方法:

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

并在获取数据后过滤和设置状态以及设置文章.但是,我只会将文章存储在状态中,并在需要时进行过滤,最终不必同步所有数组以确保它们具有相同的数据.

标签：fetch-api,javascript,reactjs,asynchronous
来源： https://codeday.me/bug/20190823/1699842.html