如何通过使用从父组件传递的props在反应中选择下拉菜单迭代?

Question

我在模态中使用父组件的道具，我不确定如何使其动态显示在选择下拉菜单中。我看到存根硬编码的"代理"值正在重复，但我如何实际使动态显示从我收到的道具值?我遗漏了什么?

React模态组件

import React, { useState, useEffect } from 'react'
import Button from '@/components/Button.jsx'
import Loading from '@/components/Loading.jsx'
import Modal from '@/components/Modal.jsx'
/**
* Handles displaying the capabilities modal for creating new capabilities or updating exiting ones.
* @component
*/ 
export default function AddCapabilitiesModal({ profile, onClose }) {
const [error, setError] = useState(null)
const [loading, setLoading] = useState(false)
const [agents, setAgents] = useState([])
const [profiles, setProfiles] = useState([])
useEffect(() => {
if (profile) {
console.log(profile);
setAgents(profile.map((f) => ({ label: f.agent, value: f.agent })))
setLoading(false);
}
}, [])
/**
* Erases information of text field variables and closes modal.
*/
const closeModal = () => {
setError(false)
setLoading(false)
onClose()
}
const dummyClick = () => {
console.log('click')
}
return (
<div>
<Modal>
{error && (
<label className='high'>
Error: Please confirm inputs and try again.
</label>
)}
<div className='modal-title'>
<label>EDIT STATUS</label>
</div>
<br />
<Loading text='Saving Test...' visible={loading} />
{!loading && (
<div id='addCapSelectInput' className='sub-filters'>
<div className='lrow filter-options group light-grey-bg'>
<select>
{agents.map((agent) => (
<option key={agent} value={agent}>
Agent
</option>
))} 
</select>
</div>
</div>
)}
<div className='modal-row top-horizontal-divider'>
<Button onClick={closeModal} className='modal-cancel'>
Cancel
</Button>
<Button
onClick={dummyClick}
className='modal-submit'
>
Submit
</Button>
</div>
</Modal>
</div>
)
}

Answer 1

我可以看到你的agent状态是一个包含标签和值键的对象列表。所以你应该重写渲染部分像这样:

{
agents.map((agent) => (
<option key={agent.label} value={agent.value}>
{agent.label}
</option>
))
}