在Redux状态托管的组件

问题描述

我正在尝试使用Primereact DataView，问题是使用操作从后端加载了我的数据。以下是我的代码，将在后面解释我的目标。

 export const getFinishedProjects = () => dispatch => {
    axios.get(finishedProjectsURL)
        .then(res => {
            dispatch({
                type: GET_FINISHED_PROJECTS,payload: res.data
            });
        }).catch(err => console.log(err))
}

componentDidMount() {
            this.props.getFinishedProjects();
        }  
  
<div className="dataview-demo">
                <div className="card">
                    <DataView 
                        value={this.props.finishedprojects} 
                        layout={this.state.layout} 
                        header={header}
                        lazy
                        itemTemplate={this.itemTemplate} 
                        paginator 
                        paginatorPosition={'both'} 
                        rows={this.rows}
                        totalRecords={this.state.totalRecords} 
                        first={this.state.first}  
                    />
                </div>
            </div>

const mapStateToProps = state =>({
   finishedprojects : state.finishedprojects.finishedprojects
})

export default connect(mapStateToProps,{getFinishedProjects} ) (FinishedProjects);

现在这是文档中的问题，我假设这两个函数是用于加载数据的

 componentDidMount() {
        setTimeout(() => {
            this.productService.getProducts().then(data => {
                this.datasource = data;
                this.setState({
                    totalRecords: data.length,products: this.datasource.slice(0,this.rows),loading: false
                });
            });
        },1000);
    }

    onPage(event) {
        this.setState({
            loading: true
        });

        //imitate delay of a backend call
        setTimeout(() => {
            const startIndex = event.first;
            const endIndex = event.first + this.rows;

            this.setState({
                first: startIndex,products: this.datasource.slice(startIndex,endIndex),loading: false
            });
        },1000);
    }

使用我的方法，我似乎遇到此错误：错误：DataViewItem（...）：渲染未返回任何内容。这通常意味着缺少return语句。或者，要不显示任何内容，请返回null。

我的假设是，这可能与我从后端加载数据的方式有关。如果是这样，可能有人会在我如何模仿这些文档（如函数）和在DataView中呈现数据方面提供帮助。预先感谢

解决方法

以某种方式，PrimeReact附带的分页器是导致我的问题的原因。因此，我使用了paginator = {false}，然后Dataview重新开始工作。我仍在调试过程中，但是与此同时，您可以通过禁用分页器来测试数据是否正常运行，如果Dataview无法正常工作，则您的数据可能格式不正确，因为DataView期望对象数组。