组件中的多重使用效果不起作用

Question

当我从单个useEffect调用 API 时，它运行良好。但是当我尝试从同一组件中的另一个useEffect调用另一个 API 时，它会显示错误。

如果可能的话，请在代码沙盒上看看我的项目。

import React, { useEffect, useState } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
const TeacherDashboard = () => {
// console.log(props)
const [appointmentList, setAppointmentList] = useState([]);
const [viewProfile, setViewProfile] = useState([]);
console.log(viewProfile);
useEffect(() => {
async function loadData(){
const response = await fetch('http://localhost:4200/appointments')
const data = await response.json();
setAppointmentList(data)
}
loadData()
}, [appointmentList])
useEffect(() => {
async function proData() {
const response = await fetch('http://localhost:4200/schedule')
const data = await response.json();
setViewProfile(data)
}
proData()
}, [viewProfile])
return (
<Container>
<Row>
<Col>
{
appointmentList.map(app => 
<div style={{border: '1px solid blue'}}>
<li>Name : {app.name} </li>
<li>Id : {app.s_id} </li>
<li>Sec : {app.sec} </li>
<li>Email : {app.email} </li>
<li>Date & Time : {app.dateTime} </li>
</div>
)
}
</Col>
</Row>
</Container>
);
};
export default TeacherDashboard;

Answer 1

我不确定将appointmentList和viewProfile状态设置为两个useEffect钩子的依赖数组的一部分的目的。它们最终都会导致无限循环，因为您直接更新useEffect钩子中的相应状态。

据我所知，您只需要发出一次两个请求，因此您应该使用空数组作为依赖数组，这样只有在挂载组件时才会调用这两个请求。这是可以做到的：

useEffect(() => {
async function proData() {
const response = await fetch('http://localhost:4200/schedule')
const data = await response.json();
setViewProfile(data)
}
proData();
async function loadData(){
const response = await fetch('http://localhost:4200/appointments')
const data = await response.json();
setAppointmentList(data)
}
loadData();
}, []);