Я пытаюсь использовать 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
Что я делаю не так? Пожалуйста, помогите.