Error : Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

Question

你好:)当用户没有输入正确的密码或用户名时，我试图显示一条错误消息，但我在控制台中有一个错误（在我的问题的标题中）。我看到创建了许多其他类似的主题，但 none 帮助了我。显然，您必须 return 一个组件，但在我的例子中，Alert 已经是一个组件，不是吗？我指定当有人输入错误时我的常量错误消息会正确填充（使用 reducer 和中间件进行管理）。它是一个字符串。就是显示不出来。。我的代码比较长，只涉及Modal组件中的这部分：非常感谢！

<Modal.Header closeButton>
          <Modal.Title>Me connecter</Modal.Title>
          {() => {
            if (!errorMessage !== '') {
              <Alert variant="danger">
                {errorMessage}
              </Alert>;
            }
          } }
        </Modal.Header>

完整代码

// import Bootsrap-react's components
import {
  Container,
  Navbar,
  Nav,
  Modal,
  Button,
  Form,
  Alert,
} from 'react-bootstrap';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { LinkContainer } from 'react-router-bootstrap';
import logo from 'src/assets/images/logo.png';
import { fetchAllEvents } from '../../actions/events';
import { setSelectedRegionId } from '../../actions/regions';
import { setSelectedGenreId } from '../../actions/genres';
import {
  changeEmail,
  changePassword,
  logIn,
  logOut,
} from '../../actions/user';
import './appHeader.scss';

const AppHeader = () => {
  const dispatch = useDispatch();
  const [show, setShow] = useState(false);
  const token = useSelector((state) => state.user.token);
  const emailValue = useSelector((state) => state.user.email);
  const passwordValue = useSelector((state) => state.user.password);
  const errorMessage = useSelector((state) => state.user.errorMessage);
  return (
    <div>
      <Navbar id="mainNav" expand="lg">
        <Container id="navbar-container">
          <LinkContainer to="/">
            <Navbar.Brand> <img src={logo} alt="logo" height="60" />
            </Navbar.Brand>
          </LinkContainer>
          <LinkContainer to="/">
            <Nav.Link>
              <h2 className="navbar-title">Concert'o</h2>
            </Nav.Link>
          </LinkContainer>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav " placement="right">
            <Nav className="flex-grow-1 justify-content-evenly">
              <LinkContainer
                to="/"
                onClick={() => {
                  dispatch(setSelectedGenreId());
                  dispatch(setSelectedRegionId());
                }}
              >
                <Nav.Link className="navlink-header">Accueil</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/genres">
                <Nav.Link className="navlink-header">Genres</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/regions">
                <Nav.Link className="navlink-header">Regions</Nav.Link>
              </LinkContainer>
              <LinkContainer
                to="/tous-les-evenements"
                onClick={() => {
                  dispatch(setSelectedGenreId());
                  dispatch(setSelectedRegionId());
                  dispatch(fetchAllEvents());
                }}
              >
                <Nav.Link className="navlink-header">Tous les événements</Nav.Link>
              </LinkContainer>
              <Nav.Link
                className="navlink-header "
                onClick={() => {
                  if (token !== null) {
                    dispatch(logOut());
                  }
                  else {
                    setShow(true);
                  }
                }}
              >{!token ? 'Se connecter' : 'Se Déconnecter'}
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
      <Modal show={show} onHide={() => setShow(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Me connecter</Modal.Title>
          {() => {
            if (!errorMessage !== '') {
              <Alert variant="danger">
                {errorMessage}
              </Alert>;
            }
          } }
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Email</Form.Label>
              <Form.Control
                type="email"
                placeholder="name@example.com"
                autoFocus
                email={emailValue}
                onChange={(event) => {
                  // console.log(event.target.value);
                  dispatch(changeEmail(event.target.value));
                }}
              />
            </Form.Group>
            <Form.Group
              className="mb-3"
              controlId="exampleForm.ControlTextarea1"
            >
              <Form.Label>Mot de passe</Form.Label>
              <Form.Control
                type="password"
                password={passwordValue}
                onChange={(event) => {
                  // console.log(event.target.value);
                  dispatch(changePassword(event.target.value));
                }}

              />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button
            variant="secondary"
            onClick={() => {
              dispatch(logIn());
              // setShow(false);
            }}
          >
            Valider
          </Button>
          <LinkContainer
            to="/inscription"
          >
            <Button onClick={() => setShow(false)} variant="primary">
              Pas encore inscrit ? Cliquez ici
            </Button>
          </LinkContainer>
        </Modal.Footer>
      </Modal>
    </div>

  );
};
export default AppHeader;

Answer 1

这里你有一个函数而不是一个组件（箭头函数）：

{() => {
if (!errorMessage !== '') {
  <Alert variant="danger">
    {errorMessage}
  </Alert>;
}
} }

改成这样：

{ errorMessage !== '' && <Alert variant="danger">{errorMessage}</Alert> }

Error : Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

Error : Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

reactjs

react-bootstrap

react-redux