我有以下脚本:
const [customers, setCustomer] = useState([]);
if(users.results){
users.results.filter(user => {
user.roles.filter(role => {
if(role.role.name === 'ADMIN'){
admins.push(user);
}
});
});
let x = []
users.results.filter(user => {
user.roles.filter(role => {
if (role.role.name === 'CUSTOMER') {
x.push(user);
}
});
});
setCustomer(x);
}
尝试调用setCustomer
会导致重新渲染次数过多。 React 限制渲染数量以防止无限循环错误。我似乎找不到原因。
如何将客户设置为 x
的值而不导致上述错误?
更新代码
const Administration = props =>{
const { fetchUsers, users, loading_users } = props;
const usersPerPage = 9
useEffect(() => {
fetchUsers();
}, []);
let admins = [];
const [customers, setCustomer] = useState([]);
if(users.results){
users.results.filter(user => {
user.roles.filter(role => {
if(role.role.name === 'ADMIN'){
admins.push(user);
}
});
});
let x = []
users.results.filter(user => {
user.roles.filter(role => {
if (role.role.name === 'CUSTOMER') {
x.push(user);
}
});
});
setCustomer(x);
}
最佳答案
听起来您只想在 users
更新时使用 setCustomer
更新客户。将其放置在带有 users
的 useEffect
中作为“仅在更改时调用此选项”选项可以为您做到这一点。看起来 admins
应该是 state:
const [admins, setAdmins] = useState([]);
useEffect(() => {
if(users.results){
let admins = [];
users.results.filter(user => {
user.roles.filter(role => {
if(role.role.name === 'ADMIN'){
admins.push(user);
}
});
});
setAdmins(admins);
let x = []
users.results.filter(user => {
user.roles.filter(role => {
if (role.role.name === 'CUSTOMER') {
x.push(user);
}
});
});
setCustomer(x);
}
}, [users]);
现在,这只会在安装时以及用户
状态更改时运行。
关于javascript - 为什么 useState React hook 会导致 Too much re-renders。 React限制渲染次数以防止无限循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61378494/