類型“錯誤”不可分配給類型“ReactNode”

Question

當我將錯誤傳遞給消息組件時出現錯誤。

類型“錯誤”不可分配給類型“ReactNode”.ts(2322)

Message.tsx(6, 3)：預期類型來自屬性“children”，該屬性在此處聲明類型為“IntrinsicAttributes & Pick<Props, "children"> & InexactPartial<Pick<Props, "variant">> & InexactPartial< Pick<{ 變體：字符串； }，從不>>'

登錄屏幕.tsx

return (
<FormContainer>
  <h1>Sign In</h1>
  {error && <Message variant="danger">{error} //this one is giving the error </Message>}
  {loading && <Loader />}
  <Form onSubmit={submitHandler}>
    <Form.Group controlId="email">
      <Form.Label>Email Address</Form.Label>
      <Form.Control
        type="email"
        placeholder="Enter email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      ></Form.Control>
    </Form.Group>
    <Form.Group controlId="password">
      <Form.Label>Password</Form.Label>
      <Form.Control
        type="password"
        placeholder="Enter password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      ></Form.Control>
    </Form.Group>
    <Button type="submit" variant="primary">
      Sign in
    </Button>
  </Form>
  <Row className="py-3">
    <Col>
      New Customer?{" "}
      <Link to={redirect ? `/register?redirect=${redirect}` : "/register"}>
        Register
      </Link>
    </Col>
  </Row>
</FormContainer>

消息.tsx

import { Alert } from "react-bootstrap";

interface Props {
  variant: string;
  children: ReactNode;
}

const Message = ({ variant, children }: Props) => {
  return (
    <Alert variant={variant}>
      {children}
    </Alert>
  );
};

Message.defaultProps = {
  variant: "info",
};

export default Message;

Answer 1

react 期望“錯誤”是字符串或元素。 由於它是錯誤類型的實例，因此無法呈現。 很可能里面有一條錯誤消息。 像這樣試試。

<Component>{error.message}</Component>}