使用对象反应本机 setState 问题答案

【问题标题】：React Native setState issue using an Object使用对象反应本机 setState 问题
【发布时间】：2020-07-21 06:28:02
【问题描述】：

我不明白为什么我的 setQuantity 不使用 setState 更新“数量”变量。在函数内部更新了对象，而不是变量“数量”。

const [quantity, setQuantity] = useState({breakfast: 0, lunch: 0, dinner: 0});

const onChangeQuantity = (value, type) => {
    let qty = quantity;
    qty[type] = value;

    //console.log(qty);  
    //{"breakfast": 0, "dinner": 0, "lunch": 6}

    setQuantity(qty);
  };

控制台显示最后一次更改是 6 顿午餐。我有一个用于函数外部“数量”的控制台，以查看是否发生变化，但仅在加载屏幕时显示初始值（0、0、0）。

你能帮我解决这个问题吗？

谢谢。

【问题讨论】：

我相信您的答案在 useState 挂钩中。该链接将说明更新对象不会自动合并。请查看扩展运算符和 useReducer 部分。 reactjs.org/docs/hooks-reference.html#functional-updates
感谢您的参考。
当然，很乐意提供帮助。很高兴有人也为你解决了这个问题。

标签： reactjs react-native native

【解决方案1】：

同样的老错误，你正在改变状态，不要那样做。总是设置一个新的引用来触发带有更新值的渲染

const [quantity, setQuantity] = useState({breakfast: 0, lunch: 0, dinner: 0});

const onChangeQuantity = (value, type) => {
    let qty = { ... quantity }; // make a copy
    qty[type] = value;
    setQuantity(qty);
};

【讨论】：

@EzequielVillarreal 太好了，记住这一点。这将发生在您不更新引用的数组和任何类型的对象的情况下
酷。我永远不会忘记这一点。再次感谢您。