Reactjs 数组长度在子组件的道具内返回零

itemsLength变量正在向分页组件返回零。分页组件上方的this.state.items.length显示计数为6，但在分页组件上显示为零

 {this.state.items.length}
                <Pagination
                    itemsLength={this.state.items.length}
                    currentPage={0}
                    pageCount={2}
                />

import React, { Component } from 'react';

class Pagination extends Component {

    pageArray = [];

    componentDidMount = () => {
        console.log(this.props.itemsLength);
        let { itemsLength, currentPage, pageCount } = this.props;
        let pages = Math.ceil(itemsLength / pageCount);

        console.log('itesm length ', itemsLength);


        for (let i = 0; i < pages; i++) {
            this.pageArray.push(i + 1);
        }

        console.log('page array ', this.pageArray);
    }
    render() {
        return (
            <div>
                {
                    this.pageArray.map(
                        page => {
                            return (<button>page</button>);
                        }
                    )
                }
            </div>
        );
    }
}

export default Pagination;

这是父组件

 {this.state.items.length}
                <Pagination
                    itemsLength={this.state.items.length}
                    currentPage={0}
                    pageCount={2}
                />

import React, { Component } from 'react';

class Pagination extends Component {

    pageArray = [];

    componentDidMount = () => {
        console.log(this.props.itemsLength);
        let { itemsLength, currentPage, pageCount } = this.props;
        let pages = Math.ceil(itemsLength / pageCount);

        console.log('itesm length ', itemsLength);


        for (let i = 0; i < pages; i++) {
            this.pageArray.push(i + 1);
        }

        console.log('page array ', this.pageArray);
    }
    render() {
        return (
            <div>
                {
                    this.pageArray.map(
                        page => {
                            return (<button>page</button>);
                        }
                    )
                }
            </div>
        );
    }
}

export default Pagination;

{this.state.items.length}

子分页组件

 {this.state.items.length}
                <Pagination
                    itemsLength={this.state.items.length}
                    currentPage={0}
                    pageCount={2}
                />

import React, { Component } from 'react';

class Pagination extends Component {

    pageArray = [];

    componentDidMount = () => {
        console.log(this.props.itemsLength);
        let { itemsLength, currentPage, pageCount } = this.props;
        let pages = Math.ceil(itemsLength / pageCount);

        console.log('itesm length ', itemsLength);


        for (let i = 0; i < pages; i++) {
            this.pageArray.push(i + 1);
        }

        console.log('page array ', this.pageArray);
    }
    render() {
        return (
            <div>
                {
                    this.pageArray.map(
                        page => {
                            return (<button>page</button>);
                        }
                    )
                }
            </div>
        );
    }
}

export default Pagination;

import React，{Component}来自'React'；
类分页扩展了组件{
pageArray=[]；
componentDidMount=（）=>{
console.log（this.props.itemsLength）；
设{itemsLength，currentPage，pageCount}=this.props；
让pages=Math.ceil（itemsLength/pageCount）；
console.log（'itesm length'，itemsLength）；
for（设i=0；i{
返回（第页）；
}
)
}
);
}
}
导出默认分页；

---

的sandbox链接我不认为代码有问题，可能是

codesandbox

原因,

• 当我更新

  shop.jsx

  文件（可能还有任何其他文件）时，您有什么问题
• 但是，当我修改

  pagination.jsx

  文件并更新输出时，一切似乎都正常

---

嘿，沙箱工作了是的，代码正在运行，但我的问题是我没有获得发送到分页组件的itemsLength prop的正确值。如果您看到组件did mount中有两个控制台，它们都显示为零，而正确的值应该为6@ash1102请确认它，并标记为答案，如果它有帮助的问题是在vs代码版本：1.45.1中遇到的，我只是将其转移到沙盒以提供整个代码。你是如何做到这一点的？请你写一段代码好吗？IDE没有问题。我在componentDidMount中填充了我的pageArray，它只被调用了一次，渲染后也是如此，所以我的pageArray一开始显示为零，不再更新。现在我重新命名了组件，它确实挂载到了myFun，并在返回到render内部之前调用了它，它工作得很好。感谢您的帮助@aXuser264