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

Question

我遇到了一个问题，但我很难解决它。永远不会填充组件 B 中的数组 pageNumbers。它依赖于一个在 class A 中 componentDidMount 运行后才赋值的 prop。在 class 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;

Answer 1

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

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

Answer 2

问题

您可能想回顾一下状态更新在 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 });
}

改进的解决方案

由于页码本质上是从道具中派生的“数据”，它们实际上并不属于任何组件的状态。您实际上可以直接在渲染函数中计算页码。 在 state 中存储 props 或从 props 派生的数据也被认为是一种反模式，因为这会导致 state/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>
);

渲染在另一个组件的渲染函数内声明的组件不包括 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

javascript

render

reactjs

react-native

问题

解决方案

改进的解决方案