如何防止应用程序不渲染两次？（反应）

Question

我在应用程序中显示 totalAmount 时遇到问题。由于两次渲染，它显示错误的值。我尝试为此使用 useMemo 钩子。

这就是它的样子（不要理会 css :D ）

所以它是这样计算的：

7.99 * 2 + 4.99 = 20.97

最后添加的项目-44.99没有被计算在totalAmount

并且由于渲染两次，它会将第一项乘以 2，我猜

这是我的代码沙箱：https://codesandbox.io/s/objective-kare-805kc?file=/src/components/App.tsx

Answer 1

您的组件无法适应多重渲染这一事实本身就是一个问题。通常，您不能假设您的组件只会渲染一定次数，而当即将发布的并发模式发布时，这一点尤其如此。出于性能原因，减少渲染数量可能会有用，但我认为这不能解决您的问题。

问题似乎是您的减速器不纯。 reducer 应该是一个纯函数：它接受一个状态和一个动作，然后产生一个新的状态，没有副作用。但是相反，在你的减速器中间，你调用 setFixedAmount 和 setTotalAmount，这将设置状态并导致重新渲染。

从你的代码来看，我认为拥有三个状态是错误的。您有 products、totalAmount 和 fixedAmount，并且正在尝试编写代码以使它们彼此同步。相反，更好的方法是只有一个状态：products。 totalAmount和fixedAmount是根据产品计算的派生值。

function App() {
  const [allData] = useState(data.products);

  const [products, dispatch] = useReducer((state: any, action: any): any => {
    switch (action.type) {
      case "ADD_PRODUCT":
        state.filter((i: any) => {
          if (i.id === action.payload.id) {
            i.count = i.count + 1;
          }
          return i;
        });
        const noDuplicateArr = state.filter(
          (i: any) => i.id !== action.payload.id
        );
        return [...noDuplicateArr, action.payload];

      case "DELETE_PRODUCT":
        state.filter((i: any) => {
          if (i.id === action.payload.id) {
            i.count = 1;
          }
          return i;
        });
        return state.filter((item: any) => item.id !== action.payload.id);

      default:
        return state;
    }
  }, []);

  let totalAmount = 0;
  products.forEach(product => {
    totalAmount += product.count * product.price.amount;
  })
  const fixedAmount = totalAmount.toFixed(2);

  const store = useMemo(() => ({ products, dispatch }), [products]);

  return (
    <div className="app">
      <ProductContext.Provider value={{ allData, fixedAmount, store }}>
        <ShoppingList />
        <ShoppingBag />
      </ProductContext.Provider>
    </div>
  );
}

如何防止应用程序不渲染两次？（反应）

How to prevent app not to render twice? (reactjs)

typescript

reactjs

use-reducer

如何防止应用程序不渲染两次？ （反应）

How to prevent app not to render twice? (reactjs)

typescript

reactjs

use-reducer

如何防止应用程序不渲染两次？（反应）