Question

我正在研究一个从API提取数据并以表格形式显示数据的项目。该项目运行良好。我面临分页问题。我想在一个页面上显示最多5个项目，并执行一些操作，使我的应用程序可以基于获取的数据创建多个页面。这是我的posts.js页面。

Cannot read property 'then' of undefined

这是我的table.js页面

import React from 'react'
import MyTable from './table'

export default class Posts extends React.Component {
    constructor(props) {
        super(props);

        this.columns = [
            {
                name: "ID",
                key: "id"
            }, {
                name: "Title",
                key: "title"
            }, {
                name: "Body",
                key: "body"
            }
        ];

        this.maxItems = 5; 
    };

    state = {
        pgNo: 0,
        table: [],
        isFetching: true

    };
    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then(response => response.json())
            .then(res => {
                this.setState({table: res, isFetching: false});

            });



        }



    render() {
        return this.state.isFetching
            ? (
                <div
                    className="loader"
                    style={{
                    marginLeft: "50%"
                }}>
                    <img src="/assets/index.svg"/>
                </div>
            )
            : (

                <MyTable pgNo ={this.state.pgNo}
                         maxItems = {this.maxItems}
                         columns={this.columns} 
                         data={this.state.table}
                         />

            )
    }

}

还可以随时指出我在此代码中犯的任何错误。感谢所有帮助。

Answer 1

这是正确的代码

用户页面。

class Table extends React.Component {
    constructor(props) {
        super(props);

        this.columns = [
            {
                name: "ID",
                key: "id"
            }, {
                name: "Name",
                key: "name"
            }, {
                name: "Username",
                key: "username"
            }, {
                name: "Email",
                key: "email"
            }, {
                name: "Website",
                key: "website"
            }
        ];

        this.maxItems = 5; 
    };

    state = {
        pgNo: 0,
        table: [],

        url:"/user"

    };
    componentDidMount() {
        this.props.fetchuser()
        console.log(this.props.user);
        console.log("columns",this.columns);
    }




    render() {
        console.log(this.props.user);
        return (
            this.props.user.length === 0 ?
                ( <div
                    className="loader"
                    style={{
                    marginLeft: "50%"
                }}>
                    <img src="/assets/index.svg"/>
                </div>) :
                (
                    <MyTable pgNo ={this.state.pgNo}
                         maxItems = {this.maxItems}
                         columns={this.columns} 
                         data={this.props.user}
                         url={this.state.url}/>
                )
        )
    }

}

表格页面。

export default class MyTable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentPage: this.props.pgNo,
            details: [],
            id: null
        }
        this.MaxPages = 0;

    }

    PrevButton() {

        if (this.state.currentPage === 0) {
            return (null);
        } else {
            return (
                <button
                    className="btn btn-primary"
                    type="button"
                    key={this.state.currentPage}
                    style={{
                    float: "left"
                }}
                    onClick=
                    { () => { this.setState({ currentPage: this.state.currentPage - 1 }) } }>
                    Previous Page
                </button>
            );
        }

    }

    NextButton() {
        if (this.state.currentPage === this.MaxPages - 1) {
            return (null);
        } else {
            return (

                <button
                    className="btn btn-primary"
                    style={{
                    float: "right"
                }}
                    key={this.props.pgNo}
                    onClick={() => {
                    this.setState({
                        currentPage: this.state.currentPage + 1
                    })
                }}>
                    Next Page
                </button >
            );
        }
    }

    AddButton() {
        return (
            <Link to={`${this.props.url}/addnew${this.props.url}`}>

                <button
                    style={{
                    float: "right"
                }}
                    className="btn btn-primary"><Faplus/>
                </button>

            </Link>
        );
    }

    createTable = () => {

        let tableHeader = <thead>
            <tr>
                {this.props.columns.map(column => {
                        return <th key={column.name}>
                            {column.name}
                        </th>
                    })}
            </tr>

        </thead>;
        this.state.number = this.state.number + 1;
        let tableRows = [];
        for (let i = this.state.currentPage * this.props.maxItems; (i < (this.state.currentPage + 1) * this.props.maxItems) && (i <= this.props.data.length); i++) {


            let row = <tr key={i}>
                {this
                    .props
                    .columns
                    .map(column => {

                        return (
                            <td key={column.key}>

                                <Link to={`${this.props.url}/details/${i + 1}`}>
                                    {this.props.data[i][column.key]}</Link>

                            </td>
                        )
                    })}

            </tr>

            tableRows.push(row)
        }
        for (let i = 0; i <= Math.ceil(this.props.data.length / this.props.maxItems); i++) {
            this.MaxPages = i;

        }

        let tableBody = <tbody className="name">{tableRows}</tbody>;
        return <table
            style={{
            marginTop: "10%",
            width: "100%"
        }}>{tableHeader}{tableBody}
        </table>;
    }

    render() {

        return (
            <div className="row">
                <div className="col-md-2 offset-md-10">{this.AddButton()}</div>
                <div className="col-md-8 offset-md-3 table ">

                    {this.createTable()}

                </div>
                <div className="col-md-8 offset-md-3">
                    {/* {this.FirstButton()} */}
                    {this.PrevButton()}

                    {this.NextButton()}
                    {/* {this.LastButton()} */}
                </div>
            </div>
        )
    }

}

如何在我的table.js页面中包括分页？

1 个答案: