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

Posted 2023-03-28

【中文标题】在 React 状态下，对象的值不会立即更新，任何人都可以解决这个问题吗？ [复制]

【英文标题】：The value of the object is not updating immediately in the React state, can any one resolve this issue? [duplicate]

【发布时间】：2021-09-16 00:11:17

【问题描述】：

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

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

const 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);
 

返回 （

你好，篮子！

杂货

products.map(prd=>

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.Numprd.Name </h3></div>)
     </div>
     </div>
  </div>

); ;

导出默认横幅；

【问题讨论】：

状态更改是异步的。你不能在下一行console.log他们看到他们的新价值。把console.log放在函数主体，看看它的实时值

不要指望在 setXXXX 函数之后直接更新。这些是异步函数

最新状态将出现在重新渲染阶段。尝试在返回 jsx 的上方登录。如果您有兴趣深入了解为什么状态更改是异步的，请查看 dan abramov github.com/facebook/react/issues/11527#issuecomment-360199710

的答案

改进格式并添加详细说明您的挑战

【参考方案1】：

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

【讨论】：

我不想把它渲染到控制台

状态更新时，会自动渲染购物车状态内的内容

不，它没有醒来。这是我的代码库链接：github.com/prosourav/basket