从api获取时，React useEffect Infinite循环

Question

我试图将获取请求中的数据存储到一个状态中，但即使没有依赖项，它也会无限循环。当我删除div中的代码时，我过滤并映射出数组，它似乎不会无限循环，但我不知道为什么过滤/映射会导致它像那样循环

function App() {
const [searchTerm, setSearchTerm] = useState("");
const [students, setStudents] = useState([]);
const [isActive, setIsActive] = useState(false);
const average = (array) => {
return array.reduce((a, b) => a + parseFloat(b), 0) / array.length;
};
useEffect(() => {
const api = async () => {
await fetch("https://api.hatchways.io/assessment/students")
.then((res) => res.json())
.then((data) => setStudents(data.students));
};
api();
}, []);
return (
<div className='bg-gray-300 h-screen flex items-center justify-center'>
{students
.filter((student) => {
if (searchTerm === "") {
return student;
} else if (
student.firstName
.toLowerCase()
.includes(searchTerm.toLowerCase()) ||
student.lastName.toLowerCase().includes(searchTerm.toLowerCase())
) {
return student;
}
})
.map((student, i) => (
<div
key={i}
className='flex items-center space-x-8 px-8 py-3 border-b'>
<div className='flex items-start w-full space-x-7'>
<div className='border overflow-hidden rounded-full'>
<img
className='w-24 h-24 bg-contain'
src={student?.pic}
alt='student school portrait'
/>
</div>
<div className='flex flex-col justify-between space-y-4 w-full'>
<div className='flex items-center justify-between'>
<h1 className='font-bold text-5xl'>
{student?.firstName} {student?.lastName}
</h1>
<button onClick={setIsActive(!isActive)}>
{isActive ? (
<AiOutlinePlus className='h-7 w-7' />
) : (
<AiOutlineMinus className='h-7 w-7' />
)}
</button>
</div>
<div className='pl-3'>
<p>Email: {student?.email}</p>
<p>Company: {student?.company}</p>
<p>Skill: {student?.skill}</p>
<p>Average: {average(student?.grades).toFixed(2)}%</p>
</div>
</div>
</div>
</div>
))}
</div>
);
}

Answer 1

如果使用async/await，则不需要链接.then()。尝试将您的useEffect更新为：

useEffect(() => {
api();
}, []);
const api = async () => {
let res = await fetch("https://api.hatchways.io/assessment/students");
let data = await res.json();
setStudents(data.students)
}; 

此外，使用按钮点击处理程序中的箭头功能作为：

<button onClick={()=>setIsActive(!isActive)}>

Answer 2

大多数情况下，我试图调用useEffect内部的函数，而在useEffect之外编写该函数的代码。试试这个对我有用。

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

const api = async () => {
await fetch("https://api.hatchways.io/assessment/students")
.then((res) => res.json())
.then((data) => setStudents(data.students));
};

Answer 3

尝试使用async-await语法

useEffect(() => {
const fetchData = async () => {
const response = await fetch(
"https://api.hatchways.io/assessment/students"
);
const result = await response.json();
console.log("res", result);
};
fetchData();
}, []);

如果你想处理错误，你需要添加try-catch块

Answer 4

问题不是在点击按钮时设置箭头功能：<button onClick={() => setIsActive(!isActive)}>

Answer 5

<button onClick={setIsActive(!isActive)}>这可能是罪魁祸首。你正在改变每个rander的状态。您应该将() => setIsActive(!isActive)作为onClick处理程序传递。