Реагировать | Гэтсби: Компоненты внутри или снаружи компонента главной страницы

Question

Изучая, как использовать библиотеку react-beautiful-dnd, я обнаружил, что (когда я создаю библиотеку, требующую структуру), если я определяю компоненты вне основного приложения, он работает в React, но не работает в Gatsby ( разработки), он начинает работать, но затем появляются ошибки

Но если я перемещу эти компоненты внутри основного приложения, то он также работает на Gatsby

Пример кода:

export default () => {
  const [elements, setElements] = useState(myElements)

  const onDragEnd = result => {
    const { destination, source} = result

    if (!destination) return
    if (destination.droppableId === source.droppableId && destination.index === source.index) return

    const new_elements = reorder(elements, source.droppableId, destination.droppableId, source.index, destination.index)
    setElements(new_elements)
  }

  const Columns = ({ arr }) =>
    arr.map((col, i) => (
      <Droppable droppableId={col.columnId} key={i}>
        {(provided, snapshot) => (
          <Ul ref={provided.innerRef}>
            <Elements arr={col.items} />
            {provided.placeholder}
          </Ul>
        )}
      </Droppable>
    ))

  const Elements = ({ arr }) =>
    arr.map((el, j) => (
      <Draggable draggableId={el.id} index={j} key={j}>
        {(provided, snapshot) => (
          <Li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
            {el.text}
          </Li>
        )}
      </Draggable>
    ))

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Grid>
        <Columns arr={myElements} />
      </Grid>
    </DragDropContext>
  )
}

Так что, если Columns и Elements определены снаружи, это не работает (но с React)

Почему это происходит?

(песочница: https://codesandbox.io/s/using-react-beautiful-dnd-with-hooks-bfwzl?fontsize=14&hidenavigation=1&theme=dark)

Answer 1

Как сказано в документах https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#keys -for-a-list-of-draggable-

Your key should not include the index of the item

После изменения это работает как ожидается

  <Droppable droppableId={col.columnId} key={col.columnId}>
  <Draggable draggableId={el.id} index={j} key={el.id}>