如何用变量在下拉列表中设置选项

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[]>([]);


useEffect(() => {
    console.log(props.carrera);
    axios.get('http://localhost:8003/skill?carrera_id=' + props.carrera + '&tipo_id=1')
        .then(result => {
            console.log(result);
            setArea(result.data);              //here is where i'm capturing my array of options
            console.log(area);
        }

        ).catch(error => {
            console.log(error);
        });

}, [area.length]);


return (
                                <Dropdown
                                placeholder='Area'
                                search
                                selection
                                options={area.map(ar => (
                                    key: ar.skil_id,             //here is where i'm trying to set the options 
                                    value: ar.skill_id,
                                    text: ar.nombre
                                ))}
                            />)

提前谢谢。

Answer 1

您正在从您的{}电话中丢失area.map(ar => (...))。应该是area.map(ar => ({...}))

​

const Dropdown = (props) => <div>{JSON.stringify(props.options)}</div>;

const Estudiantes = (props) => {
  const [area, setArea] = React.useState([]);

  React.useEffect(() => {
    Promise.resolve([{skill_id: 1, nombre: 'one'}, {skill_id: 2, nombre: 'two'}])
      .then(result => setArea(result))
  }, [area.length]);


  return (
    <Dropdown
      placeholder='Area'
      options={area.map(ar => ({
        key: ar.skil_id,
        value: ar.skill_id,
        text: ar.nombre
      }))}
    />
  )
}

ReactDOM.render(<Estudiantes />, document.getElementById("app"));

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="app"></div>

​