javascript - react-select:如何解决“警告:道具`id`不匹配”
问题描述
我有一个带有 ReactJs 和 NextJs 的网络应用程序。在功能组件中,我使用了react-select,然后收到以下控制台警告:
警告:道具
id
不匹配。服务器:“react-select-7-input” 客户端:“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;
解决方案
尝试将道具instanceId
集添加为唯一字符串并且应该可以工作
推荐阅读
- c++ - 具有依赖和文件写入的 c++ 单元测试
- python-3.x - 在字典中找到最大的元素索引?
- python-3.x - 如何在一个函数中将 matplotlib 图表与 networkX 图表结合起来?
- python - ErrorSchemaValidation 对电子邮件主题的多个过滤器查询(由于“已超过最大读取深度 (32)”)
- java - 在 Java 中创建的每个新对象将对象实例变量加一
- database - 如何在不复制数据的情况下克隆 sqlite 数据库结构(Windows)
- reactjs - 为 Twitch 扩展反应 redux 操作
- java - MongoDB权限更改?
- cookies - 当我尝试执行此方法时出现错误 app.UseCookieAuthentication(); 在 MVC (.net 5) 中
- javascript - 顺序承诺