反应 - 空下拉列表

Question

我正在一个项目中工作，我正在尝试设置下拉列表的选项，其中包含从对 API 的请求中获得的对象数组。问题是，当程序被编译时，它不会抛出任何选项。

这是我的代码：

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 [areaSeleccionada, setAreaSeleccionada] = useState(0);
useEffect(() => {
console.log(props.carrera);
axios.get('http://localhost:8003/skill?carrera_id=' + props.carrera + '&tipo_id=1')
.then(result => {
setArea(result.data);
}
).catch(error => {
console.log(error);
});
}, [area.length]);

const actualizarAreaSelect = (e: any) => {
setAreaSeleccionada(e.target.value)
console.log(areaSeleccionada);
}
return (
<Dropdown
placeholder='Area'
options={area.map(ar => ({
key: ar.skil_id,
value: ar.skill_id,
text: ar.nombre
}))}
onChange={actualizarAreaSelect}
/>
);
}

提前感谢您的帮助。

Answer 1

如果根据API 调用的结果设置了area，则不应在useEffect的第二个参数中包含[area.length]。

useEffect(() => {
console.log(props.carrera);
axios.get('http://localhost:8003/skill?carrera_id=' + props.carrera + '&tipo_id=1')
.then(result => {
setArea(result.data);
}
).catch(error => {
console.log(error);
});
});