首页 > 解决方案 > 没有真正得到 useReducer 钩子

问题描述

我正在尝试从选择菜单中更改值。我的代码正在运行,但我认为如果我使用 useReducer 会更好。我正确吗?我试图改变它,但我似乎无法让它工作......在文档中它说:

“当您有涉及多个子值的复杂状态逻辑或下一个状态取决于前一个状态时,useReducer 通常比 useState 更可取。”

我想我应该使用它对吗?

 const [diametro, setDiametro] = useState(0);
 const [total, setTotal] = useState("0");
 useEffect(
     () => setTotal(() => ((preco / 100) * diametro).toFixed(2).replace(".", ",")), [diametro]
      );

标签: reactjstypescriptuse-reducer

解决方案


我认为useMemo在您的情况下使用正确的钩子。基本上,您是total从 的当前值“导出” 的值diametro。这意味着total只有当值改变时,值才会diametro改变。

然后代码看起来像这样:

const [diametro, setDiametro] = useState(0);
const total = useMemo(() =>
  ((preco / 100) * diametro).toFixed(2).replace(".", ","),
  [diametro]
);

一般来说,指导原则是将实际状态保持在最低限度,然后像使用钩子一样useMemo导出您需要的其他属性。请记住,将多个属性作为对象返回也是可以的useMemo,因此您只需一次useMemo调用即可派生多个值。


推荐阅读