Задать вопрос
@kirillleogky

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

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.

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

Структура проекта:
5e67c86d29e03602118186.png


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;



Подскажите как менять стейт в рендере чтобы не было бесконечного ре-рендера??
  • Вопрос задан
  • 12625 просмотров
Подписаться 2 Средний Комментировать
Пригласить эксперта
Ответы на вопрос 1
@turiq
Сейчас у вас setDataвывызывается бесконечно, поскольку срабатывает в методе рендера. То есть, render->setData>render -> и так далее. Вынести функцию в методы жизненного цикла, если она должна вызываться один раз, то в mount, если при изменении пропсов то в update (но не забудьте условие на проверку пропсов)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
15 дек. 2024, в 01:57
120000 руб./за проект
15 дек. 2024, в 01:44
400 руб./за проект
15 дек. 2024, в 01:17
100000 руб./за проект