useState集合方法不能立即反映更改（Stackoverflow中建议的解决方案不工作）

Question

每当我使用useState设置变量时，该值不会立即反映出来。这里我有一个useEffect调用computePriceSummary（）；

useEffect(() => {
    computePriceSummary();
}, []);

computePriceSummary调用三个函数，如图所示：

const computePriceSummary = () => {
   computeSubtotal();
   computeTaxes();
   computeTotal();
};

这些函数使用useState设置变量：

const computeTaxes = () => {
   let taxes = 0.05 * subtotal;
   setTaxes(taxes);
};

const computeTotal = () => {
   setTotal(taxes + subtotal);
 };

const computeSubtotal = () => {
   let subtotal = cart.products.reduce((acc, item) => {
     return (acc += item.product.price * item.quantity);
   }, 0);
   setSubtotal(subtotal);
 };

浏览器中显示的值包括：

Subtotal: $1200
Taxes: $0
Total: $0

Stackoverflow中的解决方案建议使用useEffect跟踪变量，因此我做了：

useEffect(() => {
   console.log("Use effect to immediately set variables");
 }, [subtotal, taxes, total]);

结果还是一样。

Answer 1

不仅您的函数computePriceSummary（）在useffect钩子中的任何位置都不会被调用，而且即使在依赖项数组中包含了这3个状态，您也不会看到任何重新渲染。

useEffect(() => {
    computePriceSummary();
  }, [taxes, total, subtotal]);

您将得到以下警告：

React Hook useEffect缺少依赖项：“computePriceSummary”。包括它或删除依赖项数组。（反应钩/详尽的DEP）

您可以在本演示中看到它的实际应用。正在更改数据，但在此组件中不会触发重新渲染。

如果将computePriceSummary包含在依赖项数组中（现在总共4个），将触发重新渲染。

但有一个新的警告：

“computePriceSummary”函数使useEffect挂钩（第37行）的依赖项在每次渲染时都发生更改。将其移动到useEffect回调中。或者，将“computePriceSummary”定义包装到它自己的useCallback（）钩子中。（反应钩/详尽的DEP）。

让我们修复使用useCallbackhook包装函数的问题。useCallback仅在必要时更改函数本身，并拥有自己的依赖项数组。

const computePriceSummary = useCallback(() => {
    computeSubtotal();
    computeTaxes();
    computeTotal();
  }, []);

同样，您会收到一个依赖项警告，现在它要求将所有其他函数作为依赖项包含：

React Hook useCallback缺少依赖项：“computeSubtotal”、“computeTaxes”和“computeTotal”。包括它们或删除依赖项数组。（反应钩/详尽的DEP）

我们再次使用usecallbackhook和所有其他函数来修复这个问题。将相关状态（每个函数中使用的状态）传递给它们自己的依赖性数组。

这越来越重复了，不是吗？您可能希望在后端执行这些任务，并在React中使用减少的数据。

在这里，您可以看到一个完整的演示，模拟购物车在按下按钮时更新。状态设置正确，没有依赖警告，功能运行正常。

Answer 2

调用setSubtotal时，subtotal变量不会立即更新。这意味着您对computeTaxes和computeTotal的调用是在旧值上运行的。

如果每次更新状态或道具时都会调用您的效果，这将很好，但此定义：

useEffect(() => {
    computePriceSummary();
}, []);

表示此效果只调用一次。要解决此问题，请使用以下方法：

useEffect(() => {
    computePriceSummary();
}, [subtotal, taxes, total]);

该组件将在状态变量的每次更改时重新呈现，通过将它们置于效果的依赖项中，该效果将被正确地重新触发。

添加第二个效果（使用console.log的效果）不会导致在您的案例中重新运行第一个效果。