반응 선택:"경고: Prop 'id'가 일치하지 않음"을 해결하려면 어떻게 해야 합니까?

반응 선택:"경고: Prop '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고유한 문자열로 설정되며 작동해야 합니다.

instanceId, ID가 필수인 구성 요소를 선택하십시오. 따라서 추가만 하면 됩니다.

id="long-value-select" instanceId="long-value-select"

Select 컴포넌트에 경고 메시지가 삭제됩니다. : )

React 18은useId훅은 수화에는 안전하지만(클라이언트 렌더링과 서버 렌더링 간에 안정적이지만) 글로벌하게 고유한 ID를 생성하기 위한 것입니다.당신은 그것을 사용하여 이 문제를 해결할 수 있습니다.대신 다음 컴포넌트를 사용합니다.Select:

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

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

이 컴포넌트는 다음과 같이 사용할 수 있습니다.Select하지만 ID가 안정적이기 때문에 수화 오차는 발생하지 않습니다.

<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는 리액트 셀렉트 소품 내의 임의의 문자열이어야 합니다.이 문자열은 확실히 동작합니다.

instanceId = "select-box"

언급URL : https://stackoverflow.com/questions/61290173/react-select-how-do-i-resolve-warning-prop-id-did-not-match