渲染在另一个组件的渲染函数中声明的组件不包括 REACT 17 中 componentDidMount 方法的更改

如何解决渲染在另一个组件的渲染函数中声明的组件不包括 REACT 17 中 componentDidMount 方法的更改

我遇到了一个问题，但在解决它时遇到了困难。 永远不会填充组件 B 中的数组 pageNumbers。 它依赖于仅在 componentDidMount 在类 A 中运行后才被赋予值的道具。 A类的render方法中创建的Pagination组件在它之后不会reRender。

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;

解决方法

你做得不对。试试这个。 首先收集所有页码，然后更新状态。

> fillZeroes (f @Int)
1
> fillZeroes (f @Int 4)
5
> fillZeroes (g @Int)
0
> fillZeroes (h @Int)
False

,

问题

您可能想回顾一下 React 中状态更新的工作原理。 Using state correctly。您从不直接设置状态（除了在构造函数中），所以这个 (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
  }
}

解决方案

只需先创建新数组并更新一次状态即可。

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

改进的解决方案

由于页码本质上是从 props 派生的“数据”，因此它们并不真正属于任何组件的状态。您实际上可以直接在渲染函数中计算页码。 在 state 中存储 props 或从 props 派生的数据也被认为是一种反模式，因为这会导致状态/UI 同步问题。你真的只需要一个长度为 {{1 }}，所以只需创建一个具有该长度的数组。

Math.ceil(totalItems / itemsPerPage)

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

这消除了使用 const itemsPerPage = 10; const totalItems = 100; const pageNumbers = [...new Array(Math.ceil(totalItems / itemsPerPage)).keys()]; console.log(JSON.stringify(pageNumbers)); 函数和 fillPageNumber 生命周期方法来初始化状态的需要。正确的页码将被计算并在第一次初始渲染时可用。构造函数也不再需要。

componentDidMount

如此简单，您不妨将其转换为功能组件。

class B extends Component {
  render(){
    const { itemsPerPage,totalItems } = this.props;

    return (
      <nav>
        <ul className='pagination'>
          {[...new Array(Math.ceil(totalItems / itemsPerPage)).keys()].map(number => (
            <li key={number} className='page-item'>
              {number}
            </li>
          ))}
        </ul>
      </nav>
    );
  }
}