错误:函数作为子函数无效。如果从渲染返回组件而不是<Component/>,则可能会发生这种情况

您好:)当用户没有输入正确的密码或用户名,但我在控制台(我的问题的标题)出现错误时,我试图显示一条错误消息。我看到许多其他类似的主题被创建,但没有一个对我有帮助。显然,你必须返回一个组件,但在我的情况下,Alert已经是一个组件了,不是吗? 我指定当某人犯了打字错误时,我的持续错误消息会正确填充(使用减速机和中间件进行管理)。它是一个字符串。只是我不能展示。。我的代码很长,它只涉及模态组件中的这一部分:非常感谢!

<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;