警告：渲染方法应该是 props 和 state 的纯函数；不允许从渲染触发嵌套组件更新

Question

**大家好，我有一个 react.js 应用程序，它必须根据点击链接创建三个不同的组件，第一个组件是注册表单，第二个是登录表单，最后一个是幻灯片，必须是 s '默认显示。 我的问题是，如果我单击登录，它会很好地显示表单，但会在控制台中显示此警告：“警告：渲染方法应该是道具和状态的纯函数；不允许从渲染触发嵌套组件更新。如有必要, 在 componentDidUpdate 中触发嵌套更新。

检查 Header 的渲染方法。 "

如果有人可以帮我解决这个问题以及我该如何解决，请提前感谢。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Signup from './Signup';
import Login from './Login';
import Entry from './Entry';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

const Header = () => {
  const [action, setAction] = useState("");
  
  if (action === "register") {
    const element = <Signup/>;
    ReactDOM.render(element, document.getElementById('main-root'));
  }
  if (action === "login") {
    const element = <Login/>;
    ReactDOM.render(element, document.getElementById('main-root'));
  }
  if(action === "default"){
    const element = <Entry/>;
    ReactDOM.render(element, document.getElementById('main-root'));
  }

  return(
    <div>
      <Navbar id="navigarion" bg="dark" variant="dark">
        <Nav>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        </Nav>
        <Nav>
          <Nav.Link href="#" onClick={() => setAction("register")}>Signup</Nav.Link>
          <Nav.Link href="#" onClick={() => setAction("login")}>Login</Nav.Link>
          <Nav.Link href="#" onClick={() => setAction("default")}>Logout</Nav.Link>
        </Nav>
      </Navbar>
    </div>
  );
};

export default Header;

**

Answer 1

您应该只在入口点调用一次ReactDOM.render，然后让其子组件通过返回一个或其他 JSX 组件来决定有条件地呈现什么。大致如下：

const App = () => {
  const [action, setAction] = useState("");
  const element = action === "register"
    ? <Signup/>
    : action === 'login'
      ? <Login/>
      : <Entry/>; // if `default` is the only other option
  return (
    <>
      {element}
      .. other JSX, other components
    </>
  );
};
ReactDOM.render(<App />, document.getElementById('main-root'));