如何使用从父组件传递的Prop中的React中的选择下拉迭代？

Question

我正在模态中使用来自父组件的道具，但我不确定如何在选择下的下拉下显示。我看到正在重复使用固执的“代理”值，但是我该如何使该值动态地显示我收到的道具的值？我在这里想念什么？

反应模态组件

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

正如我可以看到的那样，状态中的代理是包含标签和值密钥的对象的列表。因此，您应该将渲染部分重写为这样的部分：

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