时间戳

首页 > 解决方案 > UseEffect 无限执行

reactjs - UseEffect 无限执行

问题描述

我使用 useEffect 挂钩通过调用另一个函数 getData 从数据库中获取数据，当我收到数据时我会更新状态。

const [employees, setEmployees] = useState([])
const [shownEmployees, setShownEmployees] = useState([])
const [nbrPages, setNbrPages] = useState(0)

const getData = () => {
    axios.request(options).then((response) => {
        setEmployees(response.data)
        setShownEmployees(response.data.slice(0, nbrItems))
        response.data.length%nbrItems > 0 ? setNbrPages((response.data.length/nbrItems)+1) : setNbrPages(response.data.length/nbrItems) 
        console.log(nbrPages)
    }).catch((error) => console.log(error))
    for(let i=0;i<nbrPages;i++){
        pages_temp.push(i)
    }
    console.log(pages_temp.length)
    setPages(pages_temp)
}


useEffect(() => {
    getData()
},[])

问题nbrPages一直是 0，但是当我将employeesuseEffect 作为依赖项时，useEffect 执行了很多次，但这次nbrPages是 bieng 计算的。谁能解释这种行为，我已经尝试了每一件事。本质上，我想了解为什么useEffect当我将其employees作为依赖项提供时会无限执行，在什么时刻employees发生变化，因此它触发了 useEffect 钩子。

标签： reactjsuse-effect

解决方案

发生这种情况是因为您正在employees从 getData 方法更新状态。

setEmployees(response.data)

也就是说employees，每次更新员工时都会调用 useEffect 。

更新：看来您的问题与 useEffect 无关。你可以调试你的代码，看看此时发生了什么，

response.data.length%nbrItems > 0 ? setNbrPages((response.data.length/nbrItems)+1) : setNbrPages(response.data.length/nbrItems)

您可以将此部分重写为，

console.log(response.data.length);
console.log(nbrItems);
console.log(response.data.length % nbrItems);

if(response.data.length % nbrItems) {
    let temp = (response.data.length/nbrItems)+1;
    console.log('Temp:', temp); 
    setNbrPages(temp);
} else {
    console.log('Inside else block');
    let temp = response.data.length/nbrItems;
    console.log('Inside else temp:', temp);
    setNbrPages(temp);
}

并查看控制台日志是什么，并确定您的值是否合适。

Update2：您可以使用另一个 useEffect 来解决您的问题。

const [employees, setEmployees] = useState([])
const [shownEmployees, setShownEmployees] = useState([])
const [nbrPages, setNbrPages] = useState(0)

const getData = () => {
    axios.request(options).then((response) => {
        setEmployees(response.data)
        setShownEmployees(response.data.slice(0, nbrItems))
        response.data.length%nbrItems > 0 ? setNbrPages((response.data.length/nbrItems)+1) : setNbrPages(response.data.length/nbrItems) 
        console.log(nbrPages)
    }).catch((error) => console.log(error))
}


useEffect(() => {
    getData()
},[])

useEffect(() => {
    for(let i=0;i<nbrPages;i++){
        pages_temp.push(i)
    }
    console.log(pages_temp.length)
    setPages(pages_temp)
},[nbrPages]);

推荐阅读