Невозможно установить setState внутри дочернего компонента, используя значение, переданное Parent - PullRequest
Новая
       34

Невозможно установить setState внутри дочернего компонента, используя значение, переданное Parent

0 голосов
/ 11 июля 2019

У меня возникла ситуация, когда я реализую компонент Pagination, которому я передаю длину из родительского компонента.Я не могу напечатать номера страниц в этом дочернем компоненте.Это бросок "Максимальная достигнутая глубина"

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

Ответы [ 2 ]

3 голосов
/ 11 июля 2019

Вам нужно вернуть страницы из функции 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 указана здесь

Дайте мне знать, если это сработало.

1 голос
/ 11 июля 2019 
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> : ""}
      </>
    );
  }
}

Надеюсь, это поможет.

...