reducer REACT JS 中的 useState 更改值

Question

我在 reducer 中存储了一个对象，我使用 useSelector 检索它，我将其用作 useState 的初始值，如下所示

const Product = useSelector(state => state.reducer.selectedMeal);
const [SelectedMeals, setSelectedMeals] = useState({...Product});

我有这个功能来改变属性之一的数量

const Increase = () => {
    let copy = {...SelectedMeals};
    copy.featuresList.items.qty += 1
    setSelectedMeals(copy);   
}

问题： Product.featuresList.items.qty 中的值 // 也改变了

Answer 1

状态突变

你这样做是在改变状态，因为 copy 内部的 featuresList 与 SelectedMeals 状态中的相同，而另一个是 Product在减速器中。您正在处理一个浅拷贝。

最小化组件状态

您的 Product 变量将订阅您的 redux 商店中的最新更改。

对于不想推送到 redux 状态的数据，例如表单输入或其他 UI 数据，您只需要本地组件状态。

我建议您的 useState 挂钩（您可以有多个）应该存储描述本地更改所需的最少数据量。您可能不需要复制整个 Product.

这是一个示例，其中唯一的本地状态是当前数量的 number。

const [qty, setQty] = useState(Product.featuresList.item.qty);

const increase = () => {
  setQty( prev => prev + 1 );
}

嵌套更新

更新一个三层深度的状态属性真的很烦人，但是你can do it:

const increase = () => {
  setSelectedMeals((product) => ({
    ...product,
    featuresList: {
      ...product.featuresList,
      items: {
        ...product.featuresList.items,
        qty: product.featuresList.items.qty + 1
      }
    }
  }));
};

reducer REACT JS 中的 useState 更改值

useState change values in reducer REACT JS

reactjs

react-redux

use-state

状态突变

最小化组件状态

嵌套更新