警告：渲染不同组件时无法更新组件。 ReactRedux.Consumer答案

【问题标题】：Warning: Cannot update a component while rendering a different component. ReactRedux.Consumer警告：渲染不同组件时无法更新组件。 ReactRedux.Consumer
【发布时间】：2021-07-05 04:22:57
【问题描述】：

我在我的网络应用程序中收到一条警告，并阅读了很多关于此问题的帖子。不幸的是，我还没有设法解决我的问题，希望有人能给我一些建议。据我所知，我需要找到一种在 useEffect 中调度到商店的方法。但是到目前为止我的努力都没有成功。

警告说：

index.js:1 警告：在渲染不同的组件 (ReactRedux.Consumer) 时无法更新组件 (Connect(TabMenuComponent))。要在ReactRedux.Consumer 中找到错误的 setState() 调用，请按照https://reactjs.org/link/setstate-in-render 中所述的堆栈跟踪进行操作

堆栈跟踪进一步将我指向该文件。它指向第 30 行，即 store.dispatch 行：

export const AuthRoute = ({ component: Component, roles, computedMatch, ignoreRedirection, ...rest }) => (
  <Route exact {...rest} render={props => {
    return <ReactReduxContext.Consumer>
      {({ store }) => {
        const user = store.getState().appData.user;

        if (!user) {
          auth.setRedirectUrl(window.location.pathname);
          return <Redirect to={auth.loginUrl} />;
        }

        const redirectUrl = auth.getRedirectUrl();

        if (redirectUrl && !ignoreRedirection) {
          auth.removeRedirectUrl();
          return <Redirect to={redirectUrl} />;
        }

        if (roles && roles.length && !roles.some(neededRole => user.roles.some(userRole => userRole === neededRole))) {
          return <BaseLayout authError={stringKeys.error.unauthorized}></BaseLayout>;
        }

        store.dispatch({ type: "ROUTE_CHANGED", url: computedMatch.url, path: computedMatch.path, params: computedMatch.params })
        return <Component {...props} />;

      }}
    </ReactReduxContext.Consumer>;
  }
  } />
);

【问题讨论】：

标签： reactjs react-redux react-hooks

【解决方案1】：

您在渲染过程中调度了一个不正确的动作。相反，您应该做的是为您的输入组件创建一个 HOC 或包装组件，并在您的组件安装后调度该操作

使用类组件包装器：

class CompWithDispatch extends React.Component {
   componentDidMount()  {
    const { store, type, url, path, params } = this.props;
    store.dispatch({ type, url, path, params })
   }

   render() {
      const { store, type, url, path, params , component: Component,  ...rest} = this.props;
      return <Component {...rest} />
   }
}

带函数组件包装器

const CompWithDispatch = (props) => {
    const { store, type, url, path, params, component:Component, ...rest } = props;
    useEffect(() => {
       store.dispatch({ type, url, path, params })
    }, []);
    return <Component {...rest} />

}

并像使用它

export const AuthRoute = ({ component, roles, computedMatch, ignoreRedirection, ...rest }) => (
  <Route exact {...rest} render={props => {
    return <ReactReduxContext.Consumer>
      {({ store }) => {
        const user = store.getState().appData.user;

        if (!user) {
          auth.setRedirectUrl(window.location.pathname);
          return <Redirect to={auth.loginUrl} />;
        }

        const redirectUrl = auth.getRedirectUrl();

        if (redirectUrl && !ignoreRedirection) {
          auth.removeRedirectUrl();
          return <Redirect to={redirectUrl} />;
        }

        if (roles && roles.length && !roles.some(neededRole => user.roles.some(userRole => userRole === neededRole))) {
          return <BaseLayout authError={stringKeys.error.unauthorized}></BaseLayout>;
        }

        const additionalProps = { type: "ROUTE_CHANGED", url: computedMatch.url, path: computedMatch.path, params: computedMatch.params })
        return <CompWithDispatch {...additionalProps} {...props} component={component}/>;

      }}
    </ReactReduxContext.Consumer>;
  }
  } />
);

【讨论】：