PrimeReact Dropdown组件如何正确传入自定义options数组渲染选项

PrimeReact Dropdown 的options属性支持直接传入本地定义的数组，不需要额外封装，你当前的写法逻辑基本正确，只需要排查修正几个容易踩的问题即可正常渲染：

• 确认数组作用域：你定义的const arra = [{name:"hello0"},{name:"hello1"},{name:"hello2"},{name:"hello3"}];需要和Dropdown组件放在同一个组件作用域内，确保渲染Dropdown时能访问到该数组；如果数组定义在其他文件，需要先通过import导入再使用。
• 修正状态更新笔误：你代码中第二个Dropdown的value绑定的状态是selectedStrategy，对应的状态更新函数应该是setSelectedStrategy，原代码写的setStrategy属于命名不匹配，会导致选中选项后状态无法更新，下拉框表现异常。
• 确认字段映射正确：你已经配置了optionLabel="name"，和自定义数组里对象的name字段完全匹配，组件会自动读取该字段值作为下拉选项的显示文本，这部分配置不需要修改。

可直接运行的参考代码 #

import React, { useState } from 'react';
import { Dropdown } from 'primereact/dropdown';

const YourComponent = (props) => {
  // 下拉框选中值状态
  const [selectedStatusTo, setSelectedStatusTo] = useState(null);
  const [selectedStrategy, setSelectedStrategy] = useState(null);

  // 自定义选项数组，放在组件作用域内可直接访问
  const arra = [
    {name:"hello0"},
    {name:"hello1"},
    {name:"hello2"},
    {name:"hello3"}
  ];

  // 后续存数据库时，直接取对应状态值即可
  // 比如要存选中的reparto值，取selectedStrategy即可拿到完整选中对象，取selectedStrategy.name拿到文本值

  return (
    <>
      <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>

      <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) => setSelectedStrategy(e.value)} 
                optionLabel="name" 
                placeholder="Seleccione Tipo Reparto"
              />
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default YourComponent;

如果需要自定义选项的显示样式，还可以通过optionTemplate属性传入自定义渲染模板，基础列表渲染只需要保证options数组可访问、optionLabel和数组字段对应即可正常运行。

内容的提问来源于stack exchange，提问作者Motias