没有真正得到 useReducer 钩子答案

【问题标题】：Not really getting the useReducer hook没有真正得到 useReducer 钩子
【发布时间】：2021-08-24 21:08:23
【问题描述】：

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

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

我认为我应该使用它对吗？

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

【问题讨论】：

我认为即使是useEffect 也可能已经过分了。为什么不在您当前正在更新diametro 和preco 的任何地方直接调用setTotal？请记住，代码应该易于阅读和维护，useEffect 的异步性可能已经令人困惑——更不用说useReducer了！

标签： reactjs typescript use-reducer

【解决方案1】：

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

然后代码将如下所示：

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

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

【讨论】：

谢谢伙计。工作得很好！只是为了澄清一个想法，应用程序正在正确更改，但我在 useMemo 函数中放置了一个 console.log 并且这个控制台是一个状态，这是为什么呢？
很高兴听到！ console.log 问题可能取决于您记录值的位置和方式。 setDiametro 函数不会立即更改 diametro 的值。这是将正确的依赖数组作为钩子的最后一个参数的重要原因。
所以，为了确保你记录了total的最新值，你需要使用useEffect:useEffect(() => console.log({ total }), [total])这样React会确保在正确的位置调用console.log diametro 和 total 同步的时间。如果你不使用useEffect，或者提供不同的依赖数组，可能会发生意想不到的事情。恐怕这是钩子在 React 中的工作方式所固有的。