我正在尝试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限制了呈现的次数以防止无限循环。如何解决重新呈现错误,
1条答案
按热度按时间nue99wik1#
这就是导致无限重新渲染的原因
您需要在useEffect中提供一些依赖项数组
通过添加
[]
useEffect,只渲染一次,如果您希望在某些状态更改时再次渲染DOM,则可以将state name
放入[]
中。