React-select 从 postgres table 检索时未设置初始值

Question

我正在使用 react-select 并且我正在尝试将我的 value 道具设置为该记录的预先存在的值。

我正在从 postgres 数据库中检索数据，返回结果如下：

"{value:2,label:'Dog'},{value:4,label:'Cat'}"

然后我尝试做的是将其推送到数组，如下所示：

let data = "{value:2,label:'Dog'},{value:4,label:'Cat'}"
let selectValues = []
selectValues.push(data)
console.log(selectValues)

selectValues 数组 returns 的控制台日志在开发工具的控制台中扩展数组时出现以下结果：

0: "{value:2,label:'Dog'},{value:4,label:'Cat'}"

当我尝试将此数组分配给下面的 react-select 组件 value 时，未显示初始值。

不过，如果我按照注释行所示对数组对象进行硬编码，就值而言，它是有效的。

不确定将字符串对象推送到我的 selectValues 数组的上述方法遗漏了什么。

<Select 
  name="my-select"
  styles={customStyles}
  options={options}
  isMulti={true}
  value={selectValues}
  // value={[{value:2,label:'Dog'},{value:4,label:'Cat'}]}
  placeholder={'Options....'}
/>

Answer 1

JSON.parse() 方法解析 JSON 字符串，构造字符串描述的 JavaScript 值或对象。我感觉你从数据库收到了 JSON，所以你必须解析它。

有关详细信息，请阅读 here

React-select 从 postgres table 检索时未设置初始值

React-select initial value not being set when retrieved from postgres table

javascript

postgresql

reactjs

react-select