Блог

Я использую Carousel компонент, каждый из которых содержит отдельный компонент. Один содержит a form , а другой react-input-otp — компонент внешней библиотеки.

Если вы посмотрите на webview https://uucvm.csb.app / консоль

Даже если я добавлю name к каждому элементу, который, по моему мнению, равен id компоненту, он все равно выдает предупреждение. Кто-нибудь знает, почему это происходит и как я могу это предотвратить?

На основе этой проблемы на slick, который используется antd Carousel

Это потому, что у вас есть бесконечная карусель с 3 слайдами для показа и в режиме центра. Это означает, что Slick необходимо размещать «клоны» этих слайдов на каждом конце карусели, чтобы при приближении к концу у него была копия для отображения в начале, поскольку она «бесконечно» вращается.

И из-за этих клонов ваши компоненты формы также дублируются и приводят к дублированию идентификаторов, поэтому вы получаете предупреждение.

Вы можете исправить это предупреждение, установив infinite для prop of Carousel значение false:

 <Carousel 
    afterChange={onChange}
    infinite={false}
>
    ...
</Carousel>
  

вот ссылка