reactjs - 路由组件中的回调导致超出最大更新深度

Question

这段代码会导致重新渲染循环，但我不知道我该如何解决这个问题。我知道setStartDrawingAction和 setSaveAndResetAction线是罪魁祸首。但是我该如何解决这个问题？

<Switch location={location}>
    <Route
      exact
      path="/analyse/measures"
      component={() => {
        return (
          <MapMeasuresContainer
            startDrawing={(callback: any) => {
              setStartDrawingAction(callback);
            }}
            saveAndReset={(callback: any) => {
              setsaveAndResetAction(callback);
            }}
            selectPolygon={(polygon: any) => selectPolygon(polygon)}
          />
        );
      }}
      key="measures"
    />
</Switch>

Answer 1

当返回函数而不是安装的组件时，您需要使用 render而不是 component .

当您使用 component路由器使用 React.createElement从给定的组件创建一个新的 React 元素。这意味着如果您向组件 prop 提供内联函数，您将在每次渲染时创建一个新组件

docs