javascript - primeReact Props 和下拉选项问题

Question

我是 Node、JavaScript 和 React 的新手。我必须在下拉列表中显示数据列表，然后将选定的数据保存在数据库中。问题是如何显示要选择的数据列表

他们以这种方式获取数据

                        <div className="p-field p-col">
                        <label className="p-col-fixed" htmlFor="to">Columna final </label>
                        <div className="p-col">
                            <Dropdown id={'to'} appendTo={document.body} value={selectedStatusTo} options={props.statuses} onChange={(e) => setSelectedStatusTo(e.value)} optionLabel="name" placeholder="Seleccione Estado"/>
                        </div>
                    </div>

我知道 value 是下拉列表的选定值，我必须稍后保存，但是如何在 Options 中传递不同的数组

const arra = [{name:"hello0"},{name:"hello1"},{name:"hello2"},{name:"hello3"}];

            <div>
                <h5>Tipo de reparto</h5>
                <hr/>
                <div className="p-fluid p-formgrid p-grid">

                    <div className="p-field p-col">
                        <label className="p-col-fixed" htmlFor="from">Reparto</label>
                        <div className="p-col">
                        <Dropdown id={'type'} appendTo={document.body} value={selectedStrategy} options={arra} onChange={(e) => setStrategy(e.value)} optionLabel="name" placeholder="Seleccione Tipo Reparto"/>

                        </div>
                    </div>
                </div>
            </div>

Answer 1

options prop 可能处于本地状态，因此您可以自由地使用 React.useState 操作数组.像这样:

const defaultArra = [{name:"hello0"},{name:"hello1"},{name:"hello2"},{name:"hello3"}];
const [arra, setArra] = useState(defaultArra);
// ...
<Dropdown
  id={"type"}
  appendTo={document.body}
  value={selectedStrategy}
  options={arra}
  onChange={(e) => setStrategy(e.value)}
  optionLabel="name"
  placeholder="Seleccione Tipo Reparto"
/>

然后你可以改变arra的状态与 setArra基于一些事件，例如 onClick或 React.useEffect

// e.g add extra options:
setArr(prev => [...prev, { name: "hello4"}, { name: "hello5" }])

// e.g fetch from API:
React.useEffect(() => {
  async function fetchOptions() {
     const res = await fetch('https://example.com/tipo-reparto')
     const options = await res.json();
     setArr(options)
  }
  fetchOptions();
}, [setArr])