React Packery react-grid-layout，网格未水平放置

Question

我正在使用STRML react-grid-layout，这是一个类似于Packery的可放置式网格，用于React。我在UI中有一个array对象。但是这些项目没有填充网格。我试图理解为什么会这样。

    renderData() {
        return  this.state.data.length > 1 
           ? this.state.data.map((item) => (  // Here is the data 
            <Card className="grid-item" key={item.sku} >
                <CardImg src={item.image} />
                {/* <CardTitle> {item.sku} </CardTitle>
                <CardBody> {item.name} </CardBody> */}
            </Card>  
             )) 
           : null         
    }

    render() {
        return (
            <div>
                <div className="album">  
                    <Container>                   
                        <GridLayout className="grid" cols={3} margin={[40,20]}  rowHeight={240} width={1000}  >   
                            {this.renderData()} 
                        </GridLayout>   
                    </Container>
                </div>
            </div>          
        );
    }
} // END
export default App

我正在导入对象数组。到目前为止，它将填充ui，但不能正确形成网格。这些项目垂直排列。在React Dev Tools中，我可以看到 state 包含数据，但没有props。我设法使数组变成了props，但没有使网格与导入的数据一起工作所需的{x：，y：，w：，h：，i：}。