React - 如何在不改变下拉列表的情况下停止连续调用 useEffect

Question

我正在做一个项目，useEffect钩子和下拉菜单有问题。早些时候我问了一个问题，有人建议我从useEffect中删除第二个参数(React - Empty Dropdown(，但通过这样做，useEffect不断加载，即它向服务器发出相同的请求而不会停止。

这是我的代码：

import axios from 'axios';
import { Dropdown } from 'semantic-ui-react';
type formProps = {
funcionCierre: any
carrera: any;
nombre1: any;
}
const Estudiantes: React.FC<formProps> = (props: formProps) => {
const [area, setArea] = useState<any[]>([]);
const [conocimiento, setConocimiento] = useState<any[]>([]);
const [areaSeleccionada, setAreaSeleccionada] = useState(0);
useEffect(() => {//this is the request that it makes without stopping
axios.get('http://localhost:8003/skill?carrera_id=' + props.carrera + '&tipo_id=1')    
.then(result => {
console.log(result);                    
setArea(result.data);
}
).catch(error => {
console.log(error);
});
});
const actualizarAreaSelect = (e: any) => {
setAreaSeleccionada(e.target.value)
}
return (
<Dropdown
placeholder='Area'
options={area.map(ar => ({
key: ar.skil_id,
value: ar.skill_id,
text: ar.nombre
}))}
onChange={actualizarAreaSelect}
/>
);
}

我需要知道如何在不更改下拉列表的情况下停止它(因为这会影响服务器(。 提前感谢您的帮助。

Answer 1

据我所知，此 API 请求只需要运行一次。因此，您应该使用空数组作为依赖项数组，这将确保它仅在首次呈现组件时运行。

useEffect(() => {//this is the request that it makes without stopping
axios.get('http://localhost:8003/skill?carrera_id=' + props.carrera + '&tipo_id=1')    
.then(result => {
console.log(result);                    
setArea(result.data);
}
).catch(error => {
console.log(error);
});
}, []);