我遇到了一个问题,但在解决它时遇到了困难。 永远不会填充组件 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;
答案 0 :(得分:1)
你做得不对。试试这个。 首先收集所有页码,然后更新状态。
> fillZeroes (f @Int)
1
> fillZeroes (f @Int 4)
5
> fillZeroes (g @Int)
0
> fillZeroes (h @Int)
False
答案 1 :(得分: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 派生的“数据”,因此它们并不真正属于任何组件的状态。您实际上可以直接在渲染函数中计算页码。 在 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>
);
}
}