状态没有用 setState 更新

Posted

技术标签:

【中文标题】状态没有用 setState 更新【英文标题】:state not updating with setState react 【发布时间】:2018-08-11 16:23:14 【问题描述】:

提前感谢您查看我的问题。所以我通过 submitItem 函数从 CreateItem 组件发布到数据库,然后当返回承诺时,我调用 pullAllItems 来获取我的数据库的类别表的所有行以更新类别的状态:

反应组件:

import React,  Component  from 'react';
import CreateItem from './components/CreateItem';
import Categories from './components/Categories';

// stylesheets
import './stylesheets/App.css';

class App extends Component 
  constructor() 
    super();
    this.state = 
      categories: [],
      tasks: []
    ;

    this.submitItem = this.submitItem.bind(this);
    this.pullAllItems = this.pullAllItems.bind(this);
  

  componentWillMount() 
    fetch('/api/categories')
      .then(res => res.json())
      .then(res => 
        this.setState(
          categories: res
        );
      );
  

  submitItem(title) 
    const category = 
      title
    

    fetch('/api/categories', 
      method: 'POST',
      body: JSON.stringify(category),
      headers: new Headers(
        'Content-Type': 'application/json'
      )
    ).then(this.pullAllItems('categories'));
  

  pullAllItems(type) 
    const key = type;
    let obj = ;

    fetch('/api/' + type)
      .then(res => res.json())
      .then(res => 
        obj[key] = res;
        this.setState(
          obj
        , () => 
          console.log(this.state.categories);
        );
      );


  render() 
    return (
      <div className="App">
        <CreateItem submitItem=this.submitItem />
        <Categories categories=this.state.categories pullAllTasks=this.pullAllItems/>
      </div>
    );
  

如果我在控制台记录响应,我会得到使用 submitItem 函数发布的附加行;但是,当我在 pullAllItems 函数中更新类别的状态时,状态不会更新(即使在 setState 的回调函数中)。我是新来的反应者,我到处寻找我所缺少的东西,但在任何地方都无法得到明确的答案。任何帮助是极大的赞赏!

【问题讨论】:

pullAllItems 中,this.setState( obj ) 等价于this.setState( obj: obj )。这几乎肯定不是您想要的。 添加你正在做的 submitItem 的结尾:then(this.pullAllItems('categories'),这不应该是:then(() =&gt; this.pullAllItems('categories'))吗?否则你直接获取而不等待承诺。 另外,在submitAllItems() 中,then(this.pullAllItems(...)) 会立即被调用。我假设您想将呼叫推迟到 fetch() 完成之后。你想做fetch(...).then(() =&gt; this.pullAllItems()) 天哪,你说的都对。返回 promise 后改为调用 pullAllItems。 【参考方案1】:

我想你会想要 this.setState(obj) 以便他们的动态密钥被合并到状态中。

【讨论】:

以上是关于状态没有用 setState 更新的主要内容,如果未能解决你的问题,请参考以下文章

状态未在地理定位功能中使用 setState 进行更新

react setState 回调没有更新状态

setState 不会立即更新状态[重复]

更新状态 - 为啥在调用 setState 时创建新的状态副本?

即使在 setState 回调中,解构状态也不会更新

ComponentDidMount 中调用的 setState 没有更新状态? [复制]