如何在“React（设置状态）”中解决“超出最大更新深度”

Posted 2021-03-27

我收到错误：

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

import React, { Component } from "react";
import Form from "../Form/form";
import axios from "axios";

export default class Login extends Component {
  componentDidMount() {
    let url = "http://localhost:5060/users";

    axios.get(url).then(res => {
      console.log(res.data);
      this.setState({ users: res.data });
    });
  }


  getData(value) {

    let res;

    if (value.axios_res) {
      res = value.axios_res.data;
    }
    else{
        return
    }

    switch(res){

        case "user":
        console.log('Please Pick User');
        this.setState({ prompt: "Please Pick User" }) 
        break

        case "password":
        console.log('Please Fill Password');
        this.setState({ prompt: "Please Fill Password" })
        break

        case false:
        console.log('Wrong Password');
        this.setState({ prompt: "Wrong Password" })
        break

        case true:
        console.log("Loging in");
        this.setState({ prompt: "Loging in" })
        break

        default:
        console.log("Login");
    }
  }

  state = {
    users: [],
    prompt : "Welcome to Projector Helper"
  };

  render() {
    let form = [
      // Title
      {
        type: "select",
        name: "theater_name",
        placeholder: "Carmiel, Hifa",
        label: "Theater Name",
        options: this.state.users
      },
      {
        type: "password",
        name: "password",
        placeholder: "Password",
        label: "Password"
      }
    ];

    return (
      <div>
        <div className="row justify-content-center pt-5">
          <div className="col-6">
            <div className="card">
              <img
                src="http://www.kylelambert.com/gallery/stranger-things-netflix/images/stranger-things-season-2-poster-wide-by-kyle-lambert.jpg"
                alt=""
                height="200px"
              />
              <div className="card-body">
                <h5 className="card-title">Welcome</h5>
                <h6 className="card-subtitle mb-2 text-muted">
                  {this.state.prompt}
                </h6>
                <p className="card-text">
                  Please log in to the correct theater location, can't see
                  yourself on the list,
                  <br />
                  <a href="#">Register Now </a>
                </p>
                <Form
                  url="http://localhost:5060/login"
                  form={form}
                  submit="Login"
                  method="get"
                  data={value => this.getData(value)}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

我正在尝试做的是当我从服务器（因此切换）获得特定结果时更新状态。

每次获得特定响应时，最终结果应显示不同的消息。

答案

当你进入一个无限渲染循环时会发生这种情况 - 即你调用setstate（触发render（）），它在线下的某个地方触发另一个setstate（和另一个render（））。

React会计算连续触发的渲染次数，如果超过最大计数（最大更新深度），则会抛出此错误并假设您有无限的渲染循环问题。

另一答案

我遇到的问题是发送到Form组件的数据支持。我犯了一个错误，我自己做了很多，下次我会试着避免螺旋钻，并且如果有的话，更加谨慎地设置状态。对于我来说，使用变量工作的方式大多数时候都更好。

例：

username;
Getvalue(value){ 
This.username = value 
}

并不是

Getvalue(value){ 
This.setstate({ username : value })
}

除非它当然应该在DOM上呈现