时间戳

首页 > 解决方案 > 从 postgres 表中检索时未设置 React-select 初始值

javascript - 从 postgres 表中检索时未设置 React-select 初始值

问题描述

我正在使用 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在开发工具的控制台中展开数组时，数组的控制台日志会返回以下结果：

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

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

问题是，如果我硬编码数组对象，如注释掉的行所示，它的值，它可以工作。

不确定我在上面将字符串对象推送到我的selectValues数组的方法中缺少什么。

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

标签： javascriptreactjspostgresqlreact-select

解决方案

该JSON.parse()方法解析一个JSON字符串，构造该字符串所描述的 JavaScript 值或对象。我感觉您正在从数据库接收 JSON，因此您必须解析它。

欲了解更多信息，请阅读此处

推荐阅读