我有一个带有 ReactJs 和 NextJs 的网络应用程序。在功能组件中,我使用了 react 选择 然后,我收到以下控制台警告:
Warning: Prop
id
did not match. Server: "react-select-7-input" Client: "react-select-2-input"
我的代码如下:
import { Row, Col, Card, Form, Button } from 'react-bootstrap';
import Select from 'react-select';
const priorityOptions = [
{ value: 'p1', label: 'Top level - P1' },
{ value: 'p2', label: 'Mid level - P2' },
{ value: 'p3', label: 'Low level - P3' }
];
const PostView = () => {
return (
<div className="DashboardSla-ContentBody__Form">
<Row>
<Col md="10">
<Card className="shadow-sm">
<Card.Body>
<Form>
<h5 className="text-secondary mb-3">Booking details</h5>
<Form.Group controlId="postType">
<Form.Label>Booking priority</Form.Label>
<Select
id="postType"
placeholder="Make a selection"
options={priorityOptions}
/>
</Form.Group>
<Button
type="submit"
variant="primary"
>Add Booking</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</div>
)
}
export default PostView;
最佳答案
尝试添加 Prop instanceId
设置为唯一字符串,应该可以工作
关于javascript - react-select:如何解决 “Warning: Prop ` id` 不匹配”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61290173/