score:0

it is just simple works for me, i do not see the problem. also the callback logs the items.

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>

score:0

the issue was related to the console log itself. i was using google chrome and seems that the printed console.log json object's preview was referring to the initial state before loading. with an empty array:

  { itemtypes: array(0)}

i haven't tried to expand this preview because array(0) i'd expect to see nothing inside.

instead by expanding the wanted payload response is there even though array(0) was declared.

tricky and confusing.


Related Query

More Query from same tag