渲染方法应该是 props 和 state 的纯函数答案

【问题标题】：Render methods should be a pure function of props and state渲染方法应该是 props 和 state 的纯函数
【发布时间】：2018-10-21 04:59:27
【问题描述】：

我收到Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. 的错误。

看来是因为这段代码

const LoginAuth = () => {
  navigate(routes.INDEX);
  return null;
};

删除 navigate(routes.INDEX); 会停止错误。

代码有什么问题？我是否应该使用另一种方法来重定向authUser？ 任何帮助表示赞赏。

它是

的一部分

import React from 'react';
import { navigate } from 'gatsby';

import AuthUserContext from './AuthUserContext';
import withAuthentication from './withAuthentication';

import Layout from './Layout';
import LoginForm from './LoginForm';    
import * as routes from '../../constants/routes';

const LoginAuth = () => {
  navigate(routes.INDEX);
  return null;
};

const LoginPage = () => (
  <Layout>
    <Transition>
      <AuthUserContext.Consumer>
        {authUser => (authUser ? <LoginAuth /> : <LoginNonAuth />)}
      </AuthUserContext.Consumer>
    </Transition>
  </Layout>
);

const LoginNonAuth = () => <LoginForm />;

export default withAuthentication(LoginPage);

【问题讨论】：

你的 LoginAuth 是一个函数，它应该返回额外的东西来呈现到页面，你可以直接在其中调用导航。您是否尝试在组件呈现后立即导航？
嘿@rory_za。是的，如果 authUser 已通过身份验证，则页面呈现 LoginAuth，否则呈现 LoginNonAuth。因此，如果用户使用<LoginForm /> 进行身份验证或当前已通过身份验证，则用户立即被重定向 (naviagate()) 到另一个页面。
可能可以通过将副作用 (navigate) 放入 componentDidMount 来解决。请告诉我这是否有效。
嘿@estus。是的，用navigate 包装在stateful 容器中componentDidMount 就可以了。
谢谢@estus。如果您想添加答案，我会接受。如果没有，我会这样做 - 认为您可能想要声望点数。

标签： javascript reactjs

【解决方案1】：

无状态函数组件应该是纯函数，即不包含副作用，而navigate() 提供副作用。

副作用应该在组件挂载后应用，这就是componentDidMount钩子的目的。

应该是：

class LoginAuth extends Component {
  componentDidMount() {
    navigate(routes.INDEX);
  }

  render() {
    return null;
  }
}

随着有状态功能组件的引入，副作用属于useEffect钩子：

const LoginAuth = () => {
  useEffect(() => {
    navigate(routes.INDEX);
  }, []);

  return null;
};

【讨论】：