提问人：Adnan Arif Sait 提问时间：8/2/2022 更新时间：8/2/2022 访问量：390
React Strict Mode 执行 setState 两次破坏代码
React Strict Mode executing setState Twice breaking code
问：
我的应用程序具有购物车功能，每次用户点击添加按钮时，商品数量都会增加。我在下面链接了代码沙盒。
当第一次将餐点添加到购物车时，该功能会根据需要工作。当我在同一顿饭上第二次添加点击添加时，增量增加了一倍。
Increment Amount: 3
quantity = 0;
First Add:
quantity = 3;
Second Add:
quantity = 9;
Third Add:
quantity = 15;
我知道这是由于 StrictMode 而发生的。由于 StrictMode，setState 方法被执行了两次，数量递增发生了两次。
有人可以建议一些方法在不删除 StrictMode 的情况下修复我的代码吗？
答：
1赞
kalleguld
8/2/2022
#1
使用函数参数调用 setOrderDetails 时，不应在该函数中使用 orderDetails。相反，您应该使用 prev。
您还在 orderDetail（第 28 行）中更改订单，这将导致问题。相反，您应该使用更新的数量创建一个新的订单对象。
有关示例，请参阅此处 https://codesandbox.io/s/multiple-state-exec-forked-klc81n。
评论
0赞
Adnan Arif Sait
8/2/2022
谢谢@kalleguld，就像你在第二点中提到的，问题是因为我在数组中变异了一个对象。
评论