react-select：如何解决“警告：道具`id`不匹配”

Posted 2023-02-22

【中文标题】react-select：如何解决“警告：道具`id`不匹配”

【英文标题】：react-select: How do I resolve “Warning: Prop `id` did not match”

【发布时间】：2020-08-01 01:11:30

【问题描述】：

我有一个带有 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吗？见这里：react-select.com/props 和 github.com/JedWatson/react-select/issues/2629

我已将id="postType" 替换为instanceId="postType"。控制台中仍然显示错误。

你有想过这个吗？我认为这与 s-s-r React 应用程序的补液有关，但不知道如何解决。

【参考方案1】：

选择组件需要一个instanceId，id是必须的 所以只需添加

id="长值选择" instanceId="long-value-select"

对于您的 Select 组件，它将删除警告:)

【参考方案2】：

尝试添加 prop instanceId 设置为唯一字符串并且应该可以工作

【讨论】：

使用 Next.js 在 react-select 上进行了测试，它不再发出警告。谢谢！

我正在使用 Next.js 和 react-select，它对我有用，谢谢。

嘿，我刚刚测试过它，它可以工作！谢谢！

非常感谢！