React - 空下拉列表 [英] React - Empty Dropdown

问题描述

我在一个项目中工作，我试图设置下拉列表的选项，其中包含从请求到 API 的对象数组.问题是程序编译的时候，没有抛出任何选项.

I'm working in a project where I'm trying to set the options of a dropdown with an array of objects that I'm getting from a request to an API. The problem is that when the program is compiled, it doesn't throw any option.

这是我的代码:

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}
                />

    );
}

预先感谢您的帮助.

推荐答案

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

If area is set from the results of the API call, you shouldn't include [area.length] in the second argument of useEffect.

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

    });

这篇关于React - 空下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！