React - Empty下拉列表

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);
            });

    });