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

Posted 2023-02-22

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

【英文标题】：Rendering a component declared inside the render function of another component does not include changes in the componentDidMount method in REACT 17

【发布时间】：2021-04-04 23:10:15

【问题描述】：

我遇到了一个问题，我很难解决它。 组件 B 中的数组 pageNumbers 永远不会被填充。 它取决于仅在 componentDidMount 在类 A 中运行后才给定值的道具。 在 A 类的 render 方法中创建的 Pagination 组件不会在它之后重新渲染。

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;

【参考方案1】：

问题

您可能想查看状态更新在 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 派生的“数据”，它们并不真正属于任何组件的状态。您实际上可以直接在渲染函数中计算页码。 它也被认为是一种反模式来存储 props 或从 props 派生的数据，因为这可能导致状态/UI 同步问题。 你真的只需要一个长度为 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>
    );
  

如此简单，你也可以将其转换为功能组件。

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

【参考方案2】：

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

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