我在我的网络应用程序中收到警告,并阅读了很多关于该问题的帖子。不幸的是,我还没有设法解决我的问题,希望有人能给我一些建议。据我所知,我需要找到一种在 useEffect 中分派到商店的方法。但到目前为止,我的努力都没有成功。
警告说:
<块引用>index.js:1 警告:渲染不同组件 (Connect(TabMenuComponent)
) 时无法更新组件 (ReactRedux.Consumer
)。要在 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>;
}
} />
);
答案 0 :(得分: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>;
}
} />
);