时间戳

首页 > 解决方案 > 为什么 React SetState 没有按预期工作？

arrays - 为什么 React SetState 没有按预期工作？

问题描述

我的 React 组件中有这段代码：（__loadItems() 返回一个 Promise。）

componentDidMount(){
    const self=this;
    this.__loadItems().then((itemsCollection) => {
        // below will log what I expect:
        console.log('itemsCollection', itemsCollection);

        self.setState( (state, props) => {


             return {
                 itemTypes: itemsCollection,
             };
        }, () => {
        //below will contain what expected
        console.log(self.state.itemTypes);
        //ISSUE: state.itemTypes will be Array(0)
        console.log(self.state);

        // });
    });
}

为什么我的状态 itemTypes 不会按预期设置？

 console.log(self.state)

将输出：

 { itemTypes: Array(0)}

标签： arraysreactjspromise

解决方案

这对我来说只是简单的工作，我没有看到问题。回调还会记录项目。

const loadItems = () => (
  new Promise(resolve => {
    setTimeout(() => resolve(['item1', 'item2']), 1500);
  })
)

class App extends React.Component { 
  state = { items: [] };
  
  componentDidMount(){
    loadItems().then(items => this.addItemsToState(items))
  }
  
  addItemsToState = items => {
    this.setState({ items }, console.log(items))
  }
  
  render() {
    const { items } = this.state;
    return <ul>{items.map(item => <li>{item}</li>)}</ul>
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

  
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读