如何解决React(设置状态)中“超过最大更新深度”

Question

我收到错误消息：

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

js prettyprint-override">
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>
    );
  }
}

我试图做的是在我从服务器（因此是开关）获得特定结果时更新状态。

每次您收到特定响应时，最终结果都应该显示不同的消息。

Answer 1

我遇到的问题是发送到Form组件的数据道具。这是一个错误，我对自己做了很多罚款，下次我会尽量避免道具钻取，如果可以的话，我会更谨慎地设置状态。对我来说，处理变量在大多数时候效果更好。

例：

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

而不是

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

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

Answer 2

这发生在你进入一个无限渲染循环的时候——也就是你调用setstate(触发render())在某处触发另一个setstate(和另一个render())。

React会计算一行中触发的渲染数，如果超过最大计数（最大更新深度），则会抛出此错误，并假设存在无限渲染循环问题。