arrays - 对象的值在 React 状态下不会立即更新，任何人都可以解决这个问题吗？

Question

从'react'导入反应，{ useEffect，useState}；从“@fortawesome/free-solid-svg-icons”导入 { faShoppingBasket, faPlusSquare, faLeaf, faMinusSquare, faTrash }；从“@fortawesome/react-fontawesome”导入 { FontAwesomeIcon }；导入'./Banner.css'；

const Banner = () => { const products = ['草莓','蓝莓','橙子','香蕉','苹果','胡萝卜','芹菜','蘑菇','青椒','鸡蛋'，'奶酪'，'黄油'，'鸡肉'，'面包'，'猪肉'，'米饭'，'意大利面']; 常量 [cart,setCart] = useState([]);

常量 addToCart=(prd)=>{

  console.log(prd);
 const exist =  cart.find(product=> product.Name===prd && ++product.Num)
 if(!exist){
  const cartItem={
     Name:prd,
     Num:1
  }
  const newCart = [...cart,cartItem]
  setCart(newCart);
  console.log({cart});
 }

} return ( <div className='mainBanner' style={{height:'250px',background:'#2a2929',color:'white'}}> <div className='logo' style={{paddingTop:'40px ',textAlign:'center'}}>

你好，篮子！

杂货

{products.map(prd=>

<span onClick={()=>addToCart(prd)}> {prd}

)}

     <div className='cart'>
     <div style={{display:'inline'}}><h3 style={{display:'inline'}}><FontAwesomeIcon icon={faShoppingBasket} size = '2x'/>Basket</h3> 
     <FontAwesomeIcon icon={faTrash} size = '2x'/>
     </div>
      
     {cart.map(prd=> <div className='item'><h3><FontAwesomeIcon icon={faMinusSquare} color='grey'/> {prd.Num}{prd.Name} </h3></div>)}
     </div>
     </div>
  </div>

); };

导出默认横幅；

标签： arraysreactjsobjectstate

Answer 1

状态更改是异步的，因此如果您将 console.log 放在下一行，它不会显示更新的结果。将 console.log 放在这个 addToCart 函数之外，当状态更新时你会看到结果。