Repeater и key - Githubissues

Nelfimov commented 1 year ago

Скоуп

Рендеринг UI

Описание

Ошибка в консоли при рендеринге Repeater:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of Repeater. See https://reactjs.org/link/warning-keys for more information.

Контекст

Компонент используется в SliderTop, SliderBottom и многочисленных Tape.

Воспроизведение

При загрузке веб-страницы.

Ожидаемое поведение

Нет ошибки.

Логи

No response

Медиа-материалы

No response

Действия

Попробовал переписать рендеринг таким образом, компоненты перестали рендериться:

const Repeater: FC<RepeaterProps> = ({ quantity, items, children }) => { if (typeof children !== 'function') throw new Error('Repeater: children must be a function') ` return ( <> <Condition match={quantity === undefined}> { items?.map((children, index) => ( {children}</React.Fragment> ) } <Condition match={quantity !== undefined}> { [...new Array(quantity)]?.map((children, index) => ( {children}</React.Fragment> ) } </> ) }`

Коммит: https://github.com/torin-asakura/drum-in/pull/98/commits/52ac7daa23047acb92edf780ceb638b6f6bd3a66

Вопрос

В проекте Repeater всегда используется с пропсом quantity, но никогда с items. Что может передаваться в items?

Почему children - должна быть функцией? В проекте это всегда анонимные функции с методом map либо просто возвращают JSX. По использованию это могут быть React.FC, но тогда они не рендерятся при моей версии компонента.

TorinAsakura commented 1 year ago

Приложи пожалуйста ссылку на коммит в котором проблема, желательно, непосредственно на скоуп