Дубликаты в реагирующем окне - PullRequest
0 голосов
/ 11 апреля 2020

Я пытаюсь использовать react-window. Я вижу дублированные тексты / строки, как показано ниже.

https://i.imgur.com/PwzGYG4.png

Вот моя попытка:

...
import { Flex, Text } from '@chakra-ui/core'
import { FixedSizeList as List } from 'react-window'
...

const Row = ({ index, style }: any) => {
  return (
    <>
      {query.courses.map((c, _) => (
        <Flex
          key={c.id}
          alignItems="center"
          justifyContent="start"
          backgroundColor={index % 2 ? '' : 'gray.100'}
          paddingX="5"
          overflow="hidden"
          style={style}
        >
          <Text isTruncated>
            <Link to={`/courses/${c.id}/edit`}>
              {c.id}: {c.title}
            </Link>
          </Text>
        </Flex>
      ))}
    </>
  )
}

const CoursesTable = graphql(() => {
  return (
    <Flex flexDirection="column">
      <List width={330} height={500} itemCount={50} itemSize={100}>
        {Row}
      </List>
      <Paginate />
    </Flex>
  )
})

...

Для записи я есть только 3 пустых фиктивных курса, сгенерированных faker.js в GraphQL API. Таким образом, я попытался изменить itemCount={3}, но все еще продублировал.

Другая проблема заключается в том, что он не отображает / не отображает строки перед прокруткой (с помощью itemCount={50}) или возвращением с другой страницы (с помощью *). 1017 *).

https://i.imgur.com/dV7FkT3.png

Что я делаю не так? Пожалуйста, помогите.

...