Question

我遇到了错误：

“超出了最大更新深度。当组件重复调用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>
    );
  }
}

我想做的是，当我从服务器（因此是交换机）获得特定结果时，更新状态。

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

Answer 1

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

React会持续计数连续触发了多少个渲染，如果您超过最大计数（最大更新深度），它将抛出此错误并假定您存在无限渲染循环问题。

Answer 2

我遇到的问题是发送到Form组件的数据道具。我对自己处以罚款，这是一个错误，下一次病态时请尽量避免避免钻探和更谨慎地设置状态。对我来说，使用变量工作在大多数情况下会更好。

示例：

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

不是

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

除非应该将其呈现在DOM上

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

2 个答案: