Javascript 反应选择：如何解决“警告：道具'id'不匹配”

我有一个带有ReactJs和NextJs的web应用程序。在功能组件中，我使用了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;

---

尝试将prop instanceId集合添加为唯一字符串，应该可以工作

是否尝试设置instanceId？请看这里：我将id=postType替换为instanceId=postType。控制台中仍显示错误。您是否发现了此错误？我认为这与SSR React应用程序的再水化有关，但不确定如何解决这一问题。使用Next.js在React select上进行测试，它不再发出警告。谢谢它起作用了。谢谢你，洛蒂，我正在使用Next.js和react select，它对我有效，谢谢。嘿，我刚刚测试过它，它有效！谢谢