在状态下设置从 API 获取的数据将不起作用

Posted 2023-02-27

【中文标题】在状态下设置从 API 获取的数据将不起作用

【英文标题】：Setting fetched data from API in state won't work

【发布时间】：2017-12-05 23:54:35

【问题描述】：

我正在尝试使用 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>
    )
  

虽然组件获取了所有文章，但它无法更新featured 和quickreads。我收到以下错误：

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

为什么会这样？

【问题讨论】：

与问题无关，但与您的代码有关：如果它们具有相同的属性和值名称，您可以减少键入对象的击键次数。所以你可以代替this.setState(featured: featured, quickreads: quickreads)：this.setState(featured, quickreads)

【参考方案1】：

fetch 是异步的，因此当您尝试过滤它以设置状态时，articles 未被设置（并且是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)
    );
  );

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

【讨论】：

另外，您不应该在您的州复制数据。为您的所有文章指定一个唯一 ID，并且仅将 ID 添加到您的 featured 和 quickreads 以引用文章。否则，当文章更改时，您将发现自己必须更新多个位置。

@trixn 或者只有一个数据源，并在需要时对其进行过滤。

感谢您的解决方案。但是，现在我无法在我的渲染函数中显示这些文章。例如，当我这样做时 this.state.articles(article =>

@electro7912 可能某处有杂散语法错误。你检查过第 43 行第 15 列

我做到了。您可以在gist.github.com/mtusman/…查看代码