Javascript 呈现在另一个组件的呈现函数中声明的组件时，不包括REACT 17中componentDidMount方法中的更改

我遇到了一个问题，我很难解决它。 组件B中的数组页码从不填充。 它取决于仅在componentDidMount在类a中运行后才给定值的道具。 在类A的呈现方法中创建的分页组件不会在它之后重新呈现

import React, { Component, useState, useEffec } from 'react'
import Pagination from './B';

class A extends Component {
constructor(props) {
        super(props)
        this.state = {
            weathers: [],           
        }
    }

    componentDidMount() {
        console.log("som v componentDidMOunt")
 return axios.post(`${URL}/retrieve/fromDb`} .then(
                response => {
                    this.setState({ weathers: response.data })

                }
 render() {
 let cmpnent = <Pagination totalItems = {this.state.weathers.length} />
        //totalItems is 0 in first render and length of weathers list in 2nd after 
        //componentDidMoun in Class A runs.
return cmpnent
}
}

import React, {Component} from 'react';

class B extends Component {
    constructor(props) {
        super(props)
        this.state = {
            
            pageNumbers :[],
        }
    }

componentDidMount(){
    this.fillPageNumber()
}
  
 fillPageNumber() { 
   this.state.pageNumbers = []
    for (let i = 1; i <= Math.ceil(this.props.totalItems / this.props.itemsPerPage); i++) {
        this.setState({pageNumbers : [this.state.pageNumbers, i]});
      }
    }
 render(){
      console.log("currentPage: " + this.props.currentPage)

  return (
    <nav>
      <ul className='pagination'>
        {this.state.pageNumbers.map(number => (
            console.log("number:" + number),
          <li key={number} className='page-item'>
              {number}
          </li>
        ))}
      </ul>
    </nav>
  );
        }
}
export default Pagination;

import React，{Component，useState，useEffec}来自'React'
从“/B”导入分页；
类扩展组件{
建造师（道具）{
超级（道具）
此.state={
天气：[]，
}
}
componentDidMount（）{
console.log（“som v componentDidMOunt”）
返回axios.post（`${URL}/retrieve/fromDb`}。然后(
响应=>{
this.setState（{weathers:response.data}）
}
render（）{
设cmpnent=
//totalItems在第一次渲染中为0，天气列表的长度在第二次渲染后为0
//A班的Didmoun跑步。
返回消息
}
}
从“React”导入React，{Component}；
类扩展组件{
建造师（道具）{
超级（道具）
此.state={
页码：[]，
}
}
componentDidMount（）{
this.fillPageNumber（）
}
fillPageNumber（）{
this.state.pageNumbers=[]
for（设i=1；i(
控制台日志（“编号：+编号），

{number}

))}

);
}
}
导出默认分页；

您的操作不正确。请尝试此操作。 首先收集所有页码，然后更新状态

fillPageNumber() { 
    const pageNumbers = []
    for (let i = 1; i <= Math.ceil(this.props.totalItems / this.props.itemsPerPage); i++) {
        pageNumbers.push(i);
      }
    this.setState({pageNumbers})
}

fillPageNumber（）{
常量页码=[]
对于（设i=1；i）问题
您可能想查看状态更新在React中的工作方式。从不直接设置状态（构造函数中除外），因此（
this.state.pageNumbers=[]
）是不可能的

您还在循环中调用
setState
，而不是从以前的状态更新更新，而是从当前渲染周期使用相同的
this.state.pageNumbers
数组。您也不会复制以前的状态

fillPageNumber() { 
  this.state.pageNumbers = [] // <-- mutates state, won't trigger rerender
  for (let i = 1; i <= Math.ceil(this.props.totalItems / this.props.itemsPerPage); i++) {
    this.setState({pageNumbers : [this.state.pageNumbers, i]}); // <-- fails to copy state correctly
  }
}


const itemsPerPage=10；
const totalItems=100；
const pageNumbers=[…新数组（Math.ceil（totalItems/itemsPerPage））.keys（）；
console.log（JSON.stringify（页码））；
fillPageNumber() { 
  const pageNumbers = [];
  for (let i = 1; i <= Math.ceil(this.props.totalItems / this.props.itemsPerPage); i++) {
    pageNumbers.push(i);
  }
  this.setState({ pageNumbers });
}

[...new Array(Math.ceil(totalItems / itemsPerPage)).keys()]