React-Select: Wie behebe ich „Warnung: Prop-ID stimmte nicht überein“

Ich habe eine Web-App mit ReactJs und NextJs. In einer funktionalen Komponente habe ich verwendet Reagieren-Auswählen Dann erhalte ich die folgende Konsolenwarnung:

Warnung: Prop id hat nicht gepasst. Server: „react-select-7-input“ Client: „react-select-2-input“

Mein Code ist der folgende:

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;

Versuchen Sie, eine Stütze hinzuzufügen instanceId Als eindeutige Zeichenfolge festgelegt und sollte funktionieren

Reaktion 18 führt a ein useId Hook zum Generieren einer ID, die hydrationssicher (stabil über Client- und Server-Renderings hinweg), aber dennoch global eindeutig ist. Sie können es verwenden, um dieses Problem zu lösen. Ich verwende die folgende Komponente anstelle von Select:

import React, { useId } from 'react';
import Select from 'react-select';

export default function StableSelect({ ...props }) {
  return <Select {...props} instanceId={useId()} />;
}

Sie können diese Komponente genau so verwenden Selectaber es werden keine Hydratationsfehler ausgelöst, da seine ID stabil ist.

Für die ausgewählte Komponente ist eine Instanz-ID erforderlich. Die ID ist obligatorisch. Fügen Sie sie also einfach hinzu

id=”Long-Value-Select” InstanzId=”Long-Value-Select”

zu Ihrer Select-Komponente wird die Warnung entfernt 🙂

<Select
  className={className}
  name={field.name}
  id="long-value-select"
  instanceId="long-value-select"
  value={getValue()}
  onChange={onChange}
  placeholder={placeholder}
  options={options}
  isMulti={isMulti}
/>

Instanceid sollte eine beliebige Zeichenfolge in React Select Props sein, es wird auf jeden Fall funktionieren …

instanceId = "select-box"