Question

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

Answer 1

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

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>

Answer 2

该问题与控制台日志本身有关。我正在使用Google chrome，似乎打印的console.log json对象的预览是指加载前的初始状态。使用空数组：

  { itemTypes: Array(0)}

我没有尝试扩展此预览，因为我希望Array（0）里面什么也看不到。

即使声明了Array（0），也可以通过扩展所需的有效负载响应来实现。

棘手和令人困惑。

为什么React SetState无法按预期工作？

2 个答案: