PrimeReact Dropdown调用API后选中值不显示问题求助

核心修复步骤 #

• 匹配字段配置：PrimeReact Dropdown需要明确指定选项的optionValue和optionLabel，确保绑定的value与选项对象的对应字段一致。比如你的货币数据是{ currencyCode: 'CNY', name: '人民币' }结构，需设置optionValue="currencyCode"，同时用该字段值作为选中状态的存储内容。
• 受控组件双向绑定：严格遵循受控组件逻辑，通过value绑定选中状态，onChange回调更新状态。示例代码：

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

const DropdownDemo = () => {
  const [currencies, setCurrencies] = useState([]);
  const [selectedCurrency, setSelectedCurrency] = useState('');

  // 模拟API获取选项
  useEffect(() => {
    fetch('/api/currency-list')
      .then(res => res.json())
      .then(data => {
        setCurrencies(data);
        // 可选：设置默认选中值
        // setSelectedCurrency(data[0]?.currencyCode);
      });
  }, []);

  return (
    <Dropdown
      value={selectedCurrency}
      options={currencies}
      optionLabel="name"
      optionValue="currencyCode"
      onChange={(e) => setSelectedCurrency(e.value)}
      placeholder="选择货币"
    />
  );
};

export default DropdownDemo;

• 同步选项与选中值：API数据加载完成后，检查选中值是否存在于选项列表中，避免因异步加载导致的匹配失效：

useEffect(() => {
  if (currencies.length && selectedCurrency) {
    const isValid = currencies.some(item => item.currencyCode === selectedCurrency);
    if (!isValid) setSelectedCurrency('');
  }
}, [currencies, selectedCurrency]);

关键注意点 #

• 禁止直接修改value属性，必须通过onChange更新状态
• 确保选项列表的每个对象有唯一的optionValue字段，避免匹配冲突

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