javascript 错误代码:25872重新呈现太多,React限制了呈现的次数以防止无限循环,如何解决重新呈现错误,

qxgroojn  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(167)

我正在尝试CRUD操作,以更新数据如何防止以下错误:重新呈现次数过多。React限制呈现次数以防止无限循环。

import React,{useEffect,useState} from 'react';
import { NavLink } from 'react-router-dom';
import { getAllUsers, userDelete } from '../DBConnect/DBServices';

export default function Display() {

  const [users, setUsersList] = useState([]);
 
  useEffect(()=>{
    getAllUserDataFromDB();
  });

  const getAllUserDataFromDB=async()=>{
    const uList=await getAllUsers();
    // console.log(uList.data);
    setUsersList(uList.data);
  }

  const deleteUserById=(userId)=>{
    alert("user Deleting:-"+userId)
    userDelete(userId);
  }
  return (
    <>
        <div className='container'>
          <div className='row'>
            <h1 className='text-primary'>User Details</h1>
            <table className="table">
              <thead>
                <tr>
                  <th scope="col">Id</th>
                  <th scope="col">First Name</th>
                  <th scope="col">Last Name </th>
                  <th scope="col">Mobile</th>
                  <th scope="col">Email</th>
                  <th scope="col">City  </th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
                {
                  users.map(user=>{
                    return(<>
                      <tr>
                        <th>{user.id}</th>
                        <td>{user.fname}</td>
                        <td>{user.lname}</td>
                        <td>{user.mobile}</td>
                        <td>{user.email}</td>
                        <td>{user.city}</td>
                        <td>
                          <NavLink to={`/editUser/${user.id}`}>
                            <i className="bi bi-pencil-square text-primary"></i>
                          </NavLink>
                        </td>
                        <td>
                        <i className="bi bi-trash-fill text-danger" onClick={()=>deleteUserById(user.id)}></i>
                          </td>
                      </tr>
                    </>)
                  })
                }
              </tbody>
            </table>
          </div>
        </div>
    </>
  );
}
import React, { useEffect,useState } from 'react';
import { useForm } from 'react-hook-form'; 
import { useParams } from 'react-router-dom'; import { getUser } from '../DBConnect/DBServices';

function EditUser() { const {id}= useParams('id');  //fetching parametre from URL
const [user, setUser]=useState({});

useEffect(()=>{
  getUserById();
},[])

const{register,handleSubmit,setValue}=useForm();

const getUserById=async()=>{
   const getuser=await getUser(id);
  //  console.log(user.data)
    setUser(getuser.data);
}

const updateUser=(updatedUser)=>{
  console.log(updatedUser)
}
bundle.js:27966 The above error occurred in the <EditUser> component:

    at EditUser (http://localhost:3000/static/js/bundle.js:682:66)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:39815:5)
    at Routes (http://localhost:3000/static/js/bundle.js:40252:5)
    at AppRoutes
    at Router (http://localhost:3000/static/js/bundle.js:40190:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:38507:5)
    at div

我正在尝试CRud操作以从数据库更新;但它显示了这个错误
错误代码:25872重新呈现太多。React限制了呈现的次数以防止无限循环。如何解决重新呈现错误,

nue99wik

nue99wik1#

这就是导致无限重新渲染的原因

useEffect(()=>{
    getAllUserDataFromDB();
  });

您需要在useEffect中提供一些依赖项数组

useEffect(()=>{
        getAllUserDataFromDB();
      },[]);

通过添加[] useEffect,只渲染一次,如果您希望在某些状态更改时再次渲染DOM,则可以将state name放入[]中。

相关问题