Как дождаться изменения state и запушить его в localstorage?

Question

Проблема в том что в функции buyItem в localStorage сначала пушится пустой объект из state, а потом только меняется state и при втором клике уже пушится измененный state. Как дождаться изменения в state а потом использовать его значения?

export class Cat extends React.Component {
  state = {
    catsImg: imgArr,
    click: false,
    catPrice: 0,
    currentImg: '',
    selectedItem: {}
  }
  buyItem = (price) => {
    this.setState({
      catPrice: price,
    })
    this.renderInfo(price)
    localStorage.setItem(this.state.catPrice, JSON.stringify(this.state.selectedItem))
  }
render() {
    const { catsImg, click, currentImg, selectedItem } = this.state
    const { cats } = this.props
 
    return(
      <ul className="catsList">
        {cats.map((cat, index )=> (
          <li key={index} className='catsItem'>
            <img src={catsImg[index % catsImg.length]} alt=""/>
            <div><b>description:</b> {cat.description}</div>
            <div><b>type</b> type:{cat.type}</div>
            <div><b>Cost</b> Cost:{cat.total}</div>
            <button 
              onClick={() => 
                this.buyItem(cat.total)}>
              Buy
            </button>
          </li>
        ))}

Answer 1

buyItem = (price) => {
    this.setState(({catPrice}) => ({
      catPrice: catPrice = price,
    }),this.filterItem)
  }

  filterItem = () => {
    const visible = this.props.cats.filter(cat => 
      this.state.catPrice === cat.total)
      this.setState(({selectedItem})=>({
        selectedItem: selectedItem = visible
      }),this.pushLocal) 
  }

  pushLocal = () => {
    localStorage.setItem(this.state.catPrice, JSON.stringify(this.state.selectedItem))
  }

БЛОГ НА HUSL

Как дождаться изменения state и запушить его в localstorage?

Ответы (1 шт):