减速器 REACT JS 中的 useState 更改值答案

【问题标题】：useState change values in reducer REACT JS减速器 REACT JS 中的 useState 更改值
【发布时间】：2021-03-21 07:12:00
【问题描述】：

我在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 中的值 // 也改变了

【问题讨论】：

标签： reactjs react-redux use-state

【解决方案1】：

状态突变

您正在通过这样做来改变状态，因为copy 内部的featuresList 与SelectedMeals 状态中的相同，而一个是reducer 中的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
      }
    }
  }));
};

【讨论】：