![](/img/trans.png)
[英]Pulling a setState from child component and then using it as a value in parent component
[英]Unable to setState inside child component using the value passed by Parent
在这种情况下,我正在实现分页组件,而我将父组件的长度传递给该组件。 我无法在此子组件中打印页码。 它抛出“达到最大深度”
https://codesandbox.io/s/focused-benz-kfn9q
有人可以帮我吗?
import React from "react";
import ReactDOM from "react-dom";
import Pagination from "./Pagination";
import "./styles.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
length: 0
};
}
componentDidMount() {
this.setState({ length: 99 });
}
render() {
return <Pagination dataCount={this.state.length} />;
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
import * as React from "react";
export default class Pagination extends React.Component {
componentDidMount() {
console.log(this.props);
}
renderPageNumbers = () => {
const numberOfPages = Math.ceil(this.props.dataCount / 10);
let pages = [];
for (let i = 1; i < numberOfPages; i++) {
pages.push(<span key={i}>{i}</span>);
}
this.setState({ pages });
};
render() {
return <>{this.renderPageNumbers()}</>;
}
}
您需要从renderPageNumbers
函数返回页面。 例如,
renderPageNumbers = () => {
const numberOfPages = Math.ceil(this.props.dataCount / 2);
let pages = [];
for (let i = 1; i < numberOfPages; i++) {
pages.push(<span key={i}>{i}</span>);
}
return pages;
// this.setState({ pages });
};
CodeSanbox链接在这里列出
让我知道这是否有效。
import * as React from "react";
export default class Pagination extends React.Component {
constructor(props) {
super(props);
this.state = {
pages: this.findNumberOfPages()
};
this.findNumberOfPages = this.findNumberOfPages.bind(this)
}
componentDidMount() {
console.log(this.props);
}
componentDidUpdate(prevProps) {
if(prevProps.dataCount != this.props.dataCount){
this.setState({ pages: this.findNumberOfPages() });
}
}
findNumberOfPages() {
return Math.ceil(this.props.dataCount / 10);
}
renderPageNumbers = () => {
const numberOfPages = this.findNumberOfPages()
let pages = [];
for (let i = 1; i <= numberOfPages; i++) {
pages.push(<span key={i}>{i}</span>);
}
return pages;
};
render() {
return (
<>
{this.props.currentPage > 1 ? <span>Prev</span> : ""}
{this.renderPageNumbers()}
{this.props.currentPage < this.state.pages ? <span>Next</span> : ""}
</>
);
}
}
我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.