错误：重新渲染过多。 React 限制渲染次数以防止无限循环。 Contact.js 文件中的错误

大佬教程收集整理的这篇文章主要介绍了错误：重新渲染过多。 React 限制渲染次数以防止无限循环。 Contact.js 文件中的错误，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决错误：重新渲染过多。 React 限制渲染次数以防止无限循环。 Contact.js 文件中的错误？

开发过程中遇到错误：重新渲染过多。 React 限制渲染次数以防止无限循环。 Contact.js 文件中的错误的问题如何解决？下面主要结合日常开发的经验，给出你关于错误：重新渲染过多。 React 限制渲染次数以防止无限循环。 Contact.js 文件中的错误的解决方法建议，希望对你解决错误：重新渲染过多。 React 限制渲染次数以防止无限循环。 Contact.js 文件中的错误有所启发或帮助；

当我单击“编辑铅笔”按钮时，我试图填充我的表单，但我不断收到“多次重新渲染”的错误消息。任何人都可以在这里帮忙吗？在我的两个文件下面 我正在使用 firebase 从集合中提取数据，基本上我正在尝试构建一个简单的应用程序，您可以在其中显示该数据库中的数据，然后最终对其进行编辑或删除

Contact.Js

import React,{ useState,useEffect } from "react";
import ContactForm from "./ContactForm";
import firebaseDb from "../firebase";

const contacts = () => {
  var [learnerObjects,setLearnerObjects] = useState({});
  var [currentID,setCurrentID] = useState("");

  useEffect(() => {
    firebaseDb.child("learners").on("value",(snapshot) => {
      if (snapshot.val() != null)
        setLearnerObjects({
          ...snapshot.val(),});
    });
  },[]);

  const addOrEdit = (obj) => {
    firebaseDb.child("learners").push(obj,(err) => {
      if (err) console.log(err);
    });
  };

  return (
    <>
      <div class="jumbotron jumbotron-fluID">
        <div class="container">
          <h1 class="display-4 text-center">Contact Register</h1>
        </div>
      </div>
      <div classname="row">
        <div classname="col-md-5">
          <ContactForm
            {...setCurrentID({ addOrEdit,currentID,learnerObjects })}
          />
        </div>
        <div classname="col-md-7">
          <table classname="table table-borderless table-Stripped">
            <thead classname="thead-light">
              <tr>
                <th>First name</th>
                <th>last name</th>
                <th>email</th>
                <th>score</th>
                <th>Edit</th>
              </tr>
            </thead>
            <tbody>
              {Object.keys(learnerObjects).map(ID => {
                return (
                  <tr key={ID}>
                    <td>{learnerObjects[ID].firstnamE}</td>
                    <td>{learnerObjects[ID].lastnamE}</td>
                    <td>{learnerObjects[ID].email}</td>
                    <td>{learnerObjects[ID].scorE}</td>
                    <td>
                      <a
                        classname="btn text-priMary"
                        onClick={() => {
                          setCurrentID(ID)
                        }}
                      >
                        <i classname="fas fa-pencil-alt"></i>
                      </a>
                      <a classname="btn text-danger">
                        <i classname="fas fa-trash-alt"></i>
                      </a>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

export default Contacts;

ContactForm.Js

import React,{ useEffect,useState } from "react";

const contactForm = (props) => {
  const initialFIEldValues = {
    firstname: "",lastname: "",email: "",score: 0,};

  var [values,SETVALues] = useState(initialFIEldValues);

  useEffect(() => {
    if (props.currentID === '')
      SETVALues({
        ...initialFIEldValues,});
    else
      SETVALues({
        ...props.learnerObjects[props.currentID],});
  },[props.currentID,props.learnerObjects]);

  const handleinputChange = (E) => {
    var { name,value } = e.target;
    SETVALues({
      ...values,[name]: value,});
  };

  const handleFormsubmit = (E) => {
    e.preventDefault();
    props.addOrEdit(values);
  };

  return (
    <form autoComplete="off" onsubmit={handleFormsubmit}>
      <div classname="form-group input-group">
        <div classname="input-group-prepend">
          <div classname="input-group-text">
            <i classname="fas fa-user"></i>
          </div>
        </div>
        <input
          classname="form-control"
          placeholder="first name"
          name="firstname"
          value={values.firstnamE}
          onChange={handleinputChangE}
        />
      </div>
      <div classname="form-row">
        <div classname="form-group input-group col-md-6">
          <div classname="input-group-prepend">
            <div classname="input-group-text">
              <i classname="fas fa-user"></i>
            </div>
          </div>
          <input
            classname="form-control"
            placeholder="last name"
            name="lastname"
            value={values.lastnamE}
            onChange={handleinputChangE}
          />
        </div>
        <div classname="form-group input-group col-md-6">
          <div classname="input-group-prepend">
            <div classname="input-group-text">
              <i classname="fas fa-user"></i>
            </div>
          </div>
          <input
            classname="form-control"
            placeholder="email"
            name="email"
            value={values.email}
            onChange={handleinputChangE}
          />
        </div>
      </div>

      <div classname="form-group">
        <textarea
          classname="form-control"
          placeholder="score"
          name="score"
          value={values.scorE}
          onChange={handleinputChangE}
        />
      </div>
      <div classname="form-group">
        <input
          type="submit"
          value="Save"
          classname="btn btn-priMary btn-block"
        />
      </div>
    </form>
  );
};

export default ContactForm;

解决方法