Почему React SetState не работает должным образом? - PullRequest
Новая
       15

Почему React SetState не работает должным образом?

0 голосов
/ 15 мая 2019

У меня есть этот код в моем компоненте React: (__loadItems () возвращает Обещание.) 

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

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

Проблема была связана с самим журналом консоли.Я использовал Google Chrome и, похоже, предварительный просмотр напечатанного json-объекта console.log перед загрузкой ссылался на исходное состояние.С пустым массивом: 

  { itemTypes: Array(0)}

Я не пытался расширить этот предварительный просмотр, потому что Array (0) я ожидал бы ничего не видеть внутри.

Вместо этого за счет расширения требуемого ответа полезной нагрузкиесть, хотя Array (0) был объявлен.

Хитрый и запутанный.

0 голосов
/ 15 мая 2019

Просто у меня просто работает, проблемы не вижу.Также обратный вызов регистрирует элементы. 

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>
...