问题与UseEffect，这个UseEffect我正在使用无限运行，即使在所有需要的数据被获取 &g

Question

我使用下面的useEffect来获得给定旅游ID的相关导游ID，代码工作得很好，但问题是这会无限运行，导致系统变慢。我知道有办法限制这种迭代，但我不清楚如何应用于此。

useEffect

useEffect(() => {
bookings.forEach(({ tourId }) => {
axios.get(`http://localhost:8070/assignedGuides/check/${tourId}`).then((res) =>{
if(res.data === true){
axios.get(`http://localhost:8070/assignedGuides/get/${tourId}`)
.then(res => {
setGuides(guides => ({
...guides,
[tourId]: res.data.guideId,
}));
})
}
})
});
}, [bookings]);

Tour ID来自的代码段。

{bookings.map((booking) =>(

<tr>
<th scope = "row">{number++}</th>
<td>{booking.tourId}</td>
<td>{booking.bookingDate}</td>
<td>{booking.arrivalDate}</td>
<td>{booking.country}</td>
{/* {GuideAssigned(booking.guideId)} */}
<td>{guides[booking.tourId]}</td>

useStates

const [bookings , setBookings] = useState([]);
const [guides, setGuides] = useState({});

完整代码

import { useEffect } from "react";
import { useState } from "react";
import axios from "axios";
import IndexHeader from "components/Headers/IndexHeader";
import IndexNavbar from "components/Navbars/IndexNavbar";
import DemoFooter from "components/Footers/DemoFooter";
import {
Label,
Input,
Button,
Row,
Col,
InputGroup,
InputGroupAddon,
InputGroupText,
FormGroup,
Alert,
Container,
} from "reactstrap";
import { useHistory } from "react-router";

function AssignGuide(){


const [bookings , setBookings] = useState([]);
const [guides, setGuides] = useState({});
useEffect(()=>{
axios.get("http://localhost:8070/bookings/").then((res) =>{
setBookings(res.data);
})
})
let history = useHistory();
var number = 1;

useEffect(() => {
if(bookings.length != 0) {
bookings.forEach(({ tourId }) => {
axios.get(`http://localhost:8070/assignedGuides/check/${tourId}`).then((res) =>{
if(res.data === true){
axios.get(`http://localhost:8070/assignedGuides/get/${tourId}`)
.then(res => {
setGuides(guides => ({
...guides,
[tourId]: res.data.guideId,
}));
})
}
})

});
}
},[bookings]);
return(

<div>
<IndexNavbar />
<IndexHeader />
<h3 style ={{marginLeft:"40px"}}>Assigned Guides</h3><br/><br/>
<Row>
<Col>
<FormGroup>
<InputGroup style = {{marginLeft : "40px"}} className="form-group-no-border">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="nc-icon nc-zoom-split" />
</InputGroupText>
</InputGroupAddon>
<Input placeholder="Search " type="text" 
/>
</InputGroup>
</FormGroup>
</Col>
<Col>
<div>
<Label style = {{marginLeft : "40px"}} check>
<Input type="checkbox"/>{" "} 
<label style ={{marginRight : "40px"}}>Tour ID</label>
</Label>
</div>
</Col>
<Col></Col>
</Row>
<div style = {{marginLeft:"20px"}}  className = "tableContainer">
<table className = "table table-striped">
<thead>
<th scope = "col">#</th>
<th scope = "col">Tour ID</th>
<th scope = "col">Booking Date</th>
<th scope = "col">Arrival Date</th>
<th scope = "col">Country </th>
<th scope = "col">Guide Assigned </th>
<th scope = "col">Operation</th>
</thead>
<tbody>

{bookings.map((booking) =>(

<tr>
<th scope = "row">{number++}</th>
<td>{booking.tourId}</td>
<td>{booking.bookingDate}</td>
<td>{booking.arrivalDate}</td>
<td>{booking.country}</td>
{/* {GuideAssigned(booking.guideId)} */}
<td>{guides[booking.tourId]}</td>
<td><Button color="warning"  style = {{padding: "5px 5px 5px 5px" , width : "80px" , marginBottom : "8px"}}
onClick = {()=>{
history.push(`/assign-guide/${booking.username}`);
}}
>Assign Guide</Button>
</td>
</tr>

))}
</tbody>    

</table>
</div>   

<DemoFooter />
</div>    
);
}
export default AssignGuide;

谢谢你花时间看这篇文章!希望你能帮我解决这个问题。

Answer 1

添加一个简单的if检查符:

useEffect(()=>{
if(bookings.length === 0){
axios.get("http://localhost:8070/bookings/").then((res) =>{
setBookings(res.data);
})
}
}, [bookings])

或者，只在第一次渲染时调用:

useEffect(()=>{
axios.get("http://localhost:8070/bookings/").then((res) =>{
setBookings(res.data);
})
}, []) 

如果没有依赖数组，你在每次重新渲染时都要setbooking，这会导致重新渲染本身