超过最大更新深度 - ReactJS

Question

我正在使用 MERN 堆栈构建一个应用程序，现在它只在数据库中搜索一些数据并将其打印在页面上，但在运行代码时出现此错误：

错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

它说它来自 Module../src/index.js，但我看不到任何问题。

  3 | import App from "./App";
  4 | import * as serviceWorker from "./serviceWorker";
  5 | 
> 6 | ReactDOM.render(
  7 |   <React.StrictMode>
  8 |     <App />
  9 |   </React.StrictMode>,

我认为它可能来自一个函数或组件上的一个动作，但在那里也看不到任何无限循环。经过一些测试，我发现它在调用该组件时触发了：

./src/components/EntryModal.js

import React, { Component } from "react";
import {
  Button,
  Modal,
  ModalBody,
  ModalHeader,
  Form,
  FormGroup,
  // FormFeedback,
  Label,
  Input,
  NavLink,
} from "reactstrap";
import { connect } from "react-redux";
import { addEntry } from "../actions/obsActions";
import { clearErrors } from "../actions/errorActions";
import PropTypes from "prop-types";

export class EntryModal extends Component {
  state = {
    modal: false,
    horaLeitura: [],
    pressaoAtm: 0,
    tempAr: 0,
    tempMin: 0,
    tempMax: 0,
    umidRel: 0,
    umidMin: 0,
    radGlobal: 0,
    chDia: 0,
    ventoInten: 0,
    ventoDirecao: "",
  };

  static propTypes = {
    error: PropTypes.object.isRequired,
    clearErrors: PropTypes.func.isRequired,
  };

  componentDidUpdate(prevProps) {
    const { error } = this.props;

    if (error !== prevProps.error) {
      // Check for register error
      if (error.id === "LOGIN_FAIL") {
        this.setState({ msg: error.msg.msg });
      } else {
        this.setState({ msg: null });
      }
    }

    this.toggle();
  }

  toggle = () => {
    // Clear errors
    this.props.clearErrors();
    this.setState({
      modal: !this.state.modal,
    });
  };

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmit = (e) => {
    e.preventDefault();

    const {
      horaLeitura,
      pressaoAtm,
      tempAr,
      tempMin,
      tempMax,
      umidRel,
      umidMin,
      radGlobal,
      chDia,
      ventoInten,
      ventoDirecao,
    } = this.state;
    const newEntry = {
      horaLeitura,
      pressaoAtm,
      tempAr,
      tempMin,
      tempMax,
      umidRel,
      umidMin,
      radGlobal,
      chDia,
      ventoInten,
      ventoDirecao,
    };

    // Add Entry via addEntry action
    this.props.addEntry(newEntry);
  };

  render() {
    return (
      <div>
        <NavLink onClick={this.toggle} href="#">
          Inserir dados
        </NavLink>

        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Inserir observação</ModalHeader>
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              <FormGroup>
                <Label className="lead">Horário local da leitura</Label>
                <Input
                  type="datetime"
                  name="horaLeitura"
                  id="hora-leitura"
                  placeholder="15jan2019/14:30h"
                  onChange={this.onChange}
                />

                <Label className="lead">Pressão atmosférica</Label>
                <Input
                  type="text"
                  name="pressaoAtm"
                  id="pressao-atm"
                  placeholder="1012.9"
                  onChange={this.onChange}
                />
                <Label className="lead">Temperaturas (ar/min/max)</Label>
                <Input
                  type="text"
                  name="tempAr"
                  id="temp-ar"
                  className="temperatura"
                  placeholder="°C ar"
                  onChange={this.onChange}
                />
                <Input
                  type="text"
                  name="tempMin"
                  id="temp-min"
                  className="temperatura"
                  placeholder="mínima"
                  onChange={this.onChange}
                />
                <Input
                  type="text"
                  name="tempMax"
                  id="temp-max"
                  className="temperatura"
                  placeholder="máxima"
                  onChange={this.onChange}
                />
                <Label className="lead">Umidade (relativa/mín)</Label>
                <Input
                  type="number"
                  name="umidRel"
                  id="umid-rel"
                  placeholder="relativa"
                  onChange={this.onChange}
                />
                <Input
                  type="number"
                  name="umidMin"
                  id="umid-min"
                  placeholder="mínima"
                  onChange={this.onChange}
                />
                <Label className="lead">Radiação solar global</Label>
                <Input
                  type="number"
                  name="radGlobal"
                  id="rad-global"
                  placeholder="399"
                  onChange={this.onChange}
                />
                <Label className="lead">Chuva acumulada no dia</Label>
                <Input
                  type="text"
                  name="chDia"
                  id="ch-ac-dia"
                  placeholder="dia"
                />
                <Label className="lead">Vento (intensidade/direção)</Label>
                <Input
                  type="text"
                  name="ventoInten"
                  id="vento-inten"
                  placeholder="intensidade"
                  onChange={this.onChange}
                />
                <Input
                  type="select"
                  name="ventoDirecao"
                  id="vento-dir"
                  placeholder="direção"
                  onChange={this.onChange}
                >
                  <option value="opt-E">E: este/leste</option>
                  <option value="opt-N">N: norte</option>
                  <option value="opt-O">O: oeste</option>
                  <option value="opt-S">S: sul</option>
                  <option value="opt-NE">NE: nordeste</option>
                  <option value="opt-NO">NO: noroeste</option>
                  <option value="opt-SE">SE: sudeste</option>
                  <option value="opt-SO">SO: sudoeste</option>
                  <option value="opt-ENE">ENE: lés-nordeste</option>
                  <option value="opt-ESE">ESE: lés-sudeste</option>
                  <option value="opt-SSE">SSE: sul-sudeste</option>
                  <option value="opt-NNE">NNE: nor-nordeste</option>
                  <option value="opt-NNO">NNO: nor-noroeste</option>
                  <option value="opt-SSO">SSO: sul-sudoeste</option>
                  <option value="opt-OSO">OSO: oés-sudoeste</option>
                  <option value="opt-ONO">ONO: oés-noroeste</option>
                </Input>
                <Button style={{ marginTop: "2rem" }} color="secondary" block>
                  Gravar dados
                </Button>
              </FormGroup>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  entry: state.entry,
  error: state.error,
});

export default connect(mapStateToProps, { addEntry, clearErrors })(EntryModal);

我对 React、Redux 和所有的东西有点陌生，所以如果你能解释错误及其解决方案，那就太棒了。

Answer 1

不要在 componentDidUpdate 中使用 this.toggle 函数，因为当它被调用时，状态会被更新，所以 componentDidUpdate 会被一次又一次地调用，这会导致无限循环，而不是在某个按钮上使用 this.toggle或 componentDidMount 。

Answer 2

你在 componentDidUpdate 中调用 this.toggle()，它修改了导致重新渲染的状态，因此 componentDidUpdate 再次运行，修改了状态....这是无限循环。