Как решить ошибку «Error: Maximum update depth exceeded»?

Question

[kirillleogky]

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Подскажите как решить данную проблему?

Структура проекта:



App.js:

import React, { Component } from "react";
import "./App.css";
import Box from "@material-ui/core/Box";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Search from "./components/search/search";
import Table from "./components/table/table";
import _ from "lodash";
import actions from './actions'
import Data from './data/data';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.thirdData.data,
      search: "",
      sort: "asc", // 'desc'
      sortField: "",
      arrow: "↓"
    };
  }
  onSort = sortField => {
    const cloneData = this.state.data.concat();
    const sort = this.state.sort === "asc" ? "desc" : "asc";
    const arrow = this.state.arrow === "↓" ? "↑" : "↓";
    const data = _.orderBy(cloneData, sortField, sort);
    this.setState({ data, sort, sortField, arrow });
  };

  getFilteredData() {
    const { data, search } = this.state;

    if (!search) {
      return data;
    }
    let result = data.filter(item => {
      return (
        item["name"].toLowerCase().includes(search.toLowerCase()) ||
        item["job"].toLowerCase().includes(search.toLowerCase()) ||
        item["country"].toLowerCase().includes(search.toLowerCase()) ||
        item["city"].toLowerCase().includes(search.toLowerCase()) ||
        item["latitude"].includes(search) ||
        item["longitude"].includes(search) ||
        item["date"].toLocaleString('en', { year: 'numeric', month: 'long', day: 'numeric'}).toLowerCase().includes(search.toLowerCase())
      );
    });
    if (!result.length) {
      result = this.state.data;
    }
    return result;
  }

  render() {
    this.props.setData(Data); <---------------------------------------- ВОТ ТУТ ОШИБКА
    const { firstData, secondData } = this.props;
    const filteredData = this.getFilteredData();
    return (
      <Box className="App">
        <h1 className="title">
          {firstData.data} {secondData.data}
        </h1>
        <h3 className="title-info">
          The search will show any matching values. If there is no match, then
          all the data.
        </h3>
        <h3 className="title-info">To sort, click on the title.</h3>
        <Search
          onSearch={search => {
            this.setState({ search });
          }}
        />
        <Table
          info={filteredData}
          onSort={this.onSort}
          sortField={this.state.sortField}
          arrow={this.state.arrow}
        />
      </Box>
    );
  }
}

App.propTypes = {
  firstData: PropTypes.object.isRequired,
  secondData: PropTypes.object.isRequired,
  thirdData: PropTypes.object.isRequired
};

const mapStateToProps = store => {
  return {
    firstData: store.firstData,
    secondData: store.secondData,
    thirdData: store.thirdData
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setData: data => dispatch(actions.setData(data)),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

actions.js:

const actions = {
    setData: (data) => ({type: 'SET_DATA', payload: data}),
  }
;
export default actions;

Подскажите как менять стейт в рендере чтобы не было бесконечного ре-рендера??

Answer 1

[turiq]

Сейчас у вас setDataвывызывается бесконечно, поскольку срабатывает в методе рендера. То есть, render->setData>render -> и так далее. Вынести функцию в методы жизненного цикла, если она должна вызываться один раз, то в mount, если при изменении пропсов то в update (но не забудьте условие на проверку пропсов)

Comments

[kirillleogky]

turiq

Вынести функцию в методы жизненного цикла, если она должна вызываться один раз

Может пример тут?

[turiq]

Я в код особо не вникал, но попробуй:

componentDidMount() {
    this.props.setData(Data)
}
render().....