从PostgreSQL获取数据后react-select无法设置初始值如何解决

根本原因 #

react-select 开启isMulti={true}时，value属性要求传入由{value, label}结构对象组成的数组。你当前是把从数据库拿到的整段字符串直接作为单个元素存入数组，组件接收到的结构完全不符合预期，因此无法正常渲染初始值。
你打印的数组selectValues里的元素是字符串格式，而注释里的硬编码写法是标准的对象数组，这就是两者的本质差异。

解决方法 #

你从数据库拿到的字符串不是标准JSON格式，缺少外层数组括号、键名无引号、字符串值使用单引号，需要先做格式转换再解析为JS对象：

// 原始从数据库获取的字符串
let data = "{value:2,label:'Dog'},{value:4,label:'Cat'}"
let selectValues = []

try {
  // 1. 修正为标准JSON格式
  const standardJson = '[' + data
    // 给所有键名加双引号
    .replace(/([a-zA-Z0-9_]+):/g, '"$1":')
    // 把单引号替换为双引号
    .replace(/'/g, '"') + ']'
  // 2. 解析为对象数组
  selectValues = JSON.parse(standardJson)
} catch (err) {
  console.error('预设值解析失败：', err)
}

转换完成后直接把selectValues传给Select组件的value属性即可正常使用。

优化建议 #

如果可以调整后端查询逻辑，建议直接让PostgreSQL返回标准JSON格式的数组，不需要前端做字符串替换处理，稳定性更高。

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