在 redux 状态托管组件中与 Primereact DataView 组件斗争

Question

我正在尝试使用 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 中呈现数据。提前致谢

Answer 1

PrimeReact 附带的分页器在我的情况下是导致问题的原因。所以我有 paginator={false} 并且 Dataview 再次开始工作。我仍在调试它，但与此同时，您可以通过禁用分页器来测试您的数据是否正常工作，如果 Dataview 不起作用，那么您的数据可能不是正确的格式，因为 DataView 期望一个对象数组。