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

【问题标题】：React-select initial value not being set when retrieved from postgres table从 postgres 表中检索时未设置 React-select 初始值
【发布时间】：2021-11-22 23:49:06
【问题描述】：

我正在使用 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'}"

当我尝试将此数组分配给下面的 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....'}
/>

【问题讨论】：

@Kris - 哦。您能否建议一种在推送到 selectValues 数组之前不推送字符串/删除双引号的方法？
selectValues.push 发生在哪里？可能你的组件在推送发生之前渲染，然后正如 Kris 提到的 data 不是两个对象的数组，它是一个字符串
let selectValues = [{value:2,label:'Dog'},{value:4,label:'Cat'}] 并且不需要 push
你确定你从数据库接收到一个字符串吗？
JSON.parse() 方法解析一个 JSON 字符串，构造字符串描述的 JavaScript 值或对象。我感觉您正在从数据库接收 JSON，因此您必须对其进行解析。

标签： javascript reactjs postgresql react-select

【解决方案1】：

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

更多信息请阅读here

【讨论】：