How to solve the error "Error: Maximum update depth exceeded"?

Question

JavaScript

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.

Tell me how to solve this problem?

Project structure:


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;

Tell me how to change the state in the render so that there is no endless re-render ??

Answer 1

Now you have it setDatacalled endlessly, because it fires in the render method. That is, render->setData>render -> and so on. Move the function to the lifecycle methods, if it should be called once, then to mount, if when changing props, then to update (but do not forget the condition for checking props)