反应钩子 - 如何使用变量在下拉列表中设置选项

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>