如何在PrimeReact AutoComplete中显示自定义格式化的下拉选中值？

问题原因 #

你直接把处理Country对象的itemTemplate传给selectedItemTemplate时，因为组件绑定的value是国家名字符串，selectedItemTemplate接收的参数是字符串而非Country对象，此时访问item.name会得到undefined，导致渲染的JSX无法被组件正确解析，最终显示[object Object]。

解决方案 #

根据你的需求（输入框显示带前缀的内容，回调仅使用国家名），可以选择以下两种方案：

方案一：保持value为国家名字符串

单独编写适配字符串参数的selectedItemTemplate：

// 处理下拉选项的模板（接收Country对象）
const itemTemplate = (item: Country) => {
  return <div>Country {item.name}</div>;
};

// 处理选中后输入框显示的模板（接收国家名字符串）
const selectedItemTemplate = (item: string) => {
  return <div>Country {item}</div>;
};

// 组件使用
return (
  <div className="card flex justify-content-center">
    <AutoComplete
      field="name"
      value={selectedCountry}
      suggestions={filteredCountries}
      completeMethod={search}
      onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)}
      itemTemplate={itemTemplate}
      selectedItemTemplate={selectedItemTemplate}
      panelFooterTemplate={panelFooterTemplate}
      dropdown={true}
    />
  </div>
);

这种方式下，onChange回调拿到的e.value直接是国家名字符串，输入框显示带前缀的格式化内容，下拉选项也正常。

方案二：绑定value为Country对象

如果允许selectedCountry存储完整的Country对象，可复用原模板，回调时取对象的name属性：

// 复用同一个模板（接收Country对象）
const itemTemplate = (item: Country) => {
  return <div>Country {item.name}</div>;
};

// 组件使用，此时selectedCountry的类型为Country | null
return (
  <div className="card flex justify-content-center">
    <AutoComplete
      field="name"
      value={selectedCountry}
      suggestions={filteredCountries}
      completeMethod={search}
      onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)}
      itemTemplate={itemTemplate}
      selectedItemTemplate={itemTemplate}
      panelFooterTemplate={panelFooterTemplate}
      dropdown={true}
    />
  </div>
);

之后在需要使用国家名的回调逻辑中，通过selectedCountry?.name获取即可，输入框和下拉选项都会正确显示带前缀的内容。

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