类型 'Error' 不能分配给类型 'ReactNode'

Question

我得到错误当我将错误传递给消息组件时。

类型'Error'不能分配给类型'ReactNode'.ts(2322)

消息。tsx(6,3):期望的类型来自属性'children'它在这里的类型'IntrinsicAttributes &Pick<道具,"children&quot祝辞,InexactPartial><Pick&lt道具、"variant&quot祝辞祝辞,InexactPartial><{变量:字符串;},>祝辞的

loginScreen.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>

Message.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 expectations "error"成为字符串或元素。因为它是错误类型的实例，所以它不能被渲染。很可能在它里面有一个错误消息。像这样试试。

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