javascript - 无法使用 Parent 传递的值在子组件内设置状态

Question

我遇到这种情况，我正在实现一个分页组件，我将父组件的长度传递给该组件。我无法打印此子组件中的页码。它正在抛出“达到最大深度”

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()}</>;
  }
}

标签： javascriptreactjscomponentssetstate

Answer 1

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 链接在此处列出

让我知道这是否有效。