javascript - react virtualized auto sizer does not work - Stack Overflow

admin管理员组

文章数量:1289909

I have been trying this code and it just does not work.

With AutoSizer, Row does not gets rendered.

It only starts working when I remove AutoSizer from the code.

I don't know what is wrong with the code and the docs is not helping either.

Full code:

import React, { Component } from 'react';
import Card from './Card';
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import memoize from "memoize-one";

const CARD_SIZE = 340;

class CardList extends Component {

    getItemData = memoize((itemsPerRow, locations) => ({
        itemsPerRow,
        locations
    }))

    render() {

        const { locations } = this.props;
        console.log(locations.length)


        const Row = ({ data, index, style }) => {
            const { itemsPerRow, locations } = data;
            console.log(data)

            const items = [];
            const fromIndex = index * itemsPerRow;
            const toIndex = Math.min(fromIndex + itemsPerRow, locations.length);

            for (let i = fromIndex; i < toIndex; i++) {
                items.push(
                    <Card key={i} location={locations[i]} />
                    );
            }
            return (
                <div className={'flex-auto'} style={style}>
                {items}
                </div>
                );
        }

        return (
            <div style={{ marginTop: "10px", height: "80%" }}>
            <AutoSizer>
            {
                ({ height, width }) => {
                    const itemsPerRow = Math.floor(width / CARD_SIZE) || 1;
                    const rowCount = Math.ceil(locations.length / itemsPerRow);
                    const itemData = this.getItemData(itemsPerRow, locations);

                    return (
                        <div>
                        <List
                        height={height}
                        itemCount={rowCount}
                        itemData={itemData}
                        itemSize={CARD_SIZE}
                        width={width}
                        >
                        { Row }
                        </List>
                        </div>
                        );
                }
            }
            </AutoSizer> 
            </div>
            );
    }
}

P.S. locations props is an array of images

I have been trying this code and it just does not work.

With AutoSizer, Row does not gets rendered.

It only starts working when I remove AutoSizer from the code.

I don't know what is wrong with the code and the docs is not helping either.

Full code:

import React, { Component } from 'react';
import Card from './Card';
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import memoize from "memoize-one";

const CARD_SIZE = 340;

class CardList extends Component {

    getItemData = memoize((itemsPerRow, locations) => ({
        itemsPerRow,
        locations
    }))

    render() {

        const { locations } = this.props;
        console.log(locations.length)


        const Row = ({ data, index, style }) => {
            const { itemsPerRow, locations } = data;
            console.log(data)

            const items = [];
            const fromIndex = index * itemsPerRow;
            const toIndex = Math.min(fromIndex + itemsPerRow, locations.length);

            for (let i = fromIndex; i < toIndex; i++) {
                items.push(
                    <Card key={i} location={locations[i]} />
                    );
            }
            return (
                <div className={'flex-auto'} style={style}>
                {items}
                </div>
                );
        }

        return (
            <div style={{ marginTop: "10px", height: "80%" }}>
            <AutoSizer>
            {
                ({ height, width }) => {
                    const itemsPerRow = Math.floor(width / CARD_SIZE) || 1;
                    const rowCount = Math.ceil(locations.length / itemsPerRow);
                    const itemData = this.getItemData(itemsPerRow, locations);

                    return (
                        <div>
                        <List
                        height={height}
                        itemCount={rowCount}
                        itemData={itemData}
                        itemSize={CARD_SIZE}
                        width={width}
                        >
                        { Row }
                        </List>
                        </div>
                        );
                }
            }
            </AutoSizer> 
            </div>
            );
    }
}

P.S. locations props is an array of images

• javascript
• reactjs
• react-virtualized

Share Improve this question Follow edited May 22, 2019 at 9:57 JKhan asked May 22, 2019 at 9:16 JKhanJKhan 1,29744 gold badges1616 silver badges2323 bronze badges 4

• Can you make this a minimal reproducible example? With all these extra undefined variables it's hard to replicate the real issue. – evolutionxbox Commented May 22, 2019 at 9:44
• @evolutionxbox ok, I have pasted the whole code. – JKhan Commented May 22, 2019 at 9:57
• Does AutoSizer from react-virtualized work with react-window? – evolutionxbox Commented May 22, 2019 at 10:33
• yes, it does work =D – JKhan Commented May 22, 2019 at 10:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I tried removing "react-virtualized-auto-sizer" and installed "react-virtualized"

Then,

import {AutoSizer} from 'react-virtualized'; 

and it works!!

But I don't want to keep react-window and react-virtualized together.

I hope the author of this package will help in fixing this problem.

Maybe it's because of height inpatibility. You can check with :

<div style={{ flex: '1 1 auto' , height: '100vh'}}>
            <AutoSizer>
                {({ height, width }) => {
                   return (
                        <FixedSizeList
                            className="List"
                            height={height}
                            itemCount={1000}
                            itemSize={35}
                            width={width}
                        >
                            {Row}
                        </FixedSizeList>
                    )
                }}
            </AutoSizer>
            </div>

本文标签： javascriptreact virtualized auto sizer does not workStack Overflow