React中给JSX标签value传对象后读取为[object Object]如何解决

HTML 原生 <option> 标签的 value 属性仅支持字符串类型的值，直接传递对象时，浏览器会自动调用对象的 toString() 方法进行转换，最终存储的实际值就是固定字符串 "[object Object]"。你后续从事件对象中拿到的本身就是这个字符串，所以 JSON.stringify 处理后只会得到 "\"[object Object]\""，无法还原出原对象内容。

提供两种常用的实现方案，按需选择即可：

• 方案1（更推荐）：通过索引/唯一标识关联原对象
  无需做序列化/反序列化操作，性能更高，无JSON转换异常风险。实现逻辑为将数组索引或数据唯一ID存入value，取值后匹配原数组得到完整对象：

const [selectedOp, setSelectedOp] = useState()

// 组件部分代码
<Form.Select 
  onChange={e => {
    const idx = Number(e.target.value)
    // 排除默认未选择的情况
    if (idx >= 0) {
      const targetItem = mainNotifications[idx]
      setSelectedOp({
        message: targetItem.message,
        type: targetItem.type
      })
    } else {
      setSelectedOp(undefined)
    }
  }} 
  className='b' 
  style={{ display: 'inline-block' }} 
  size="lg" 
  aria-label="Default select example"
>
  <option value={-1}>Click to choose message</option>
  {mainNotifications.map((n, i) =>
    <option key={i} name="selectMessage" value={i}>
      hey this is an option tag 
    </option>
  )}
</Form.Select>

• 方案2：序列化对象存储，取值时反序列化
  如果数据不存在函数、循环引用、Symbol等无法被JSON序列化的内容，可以直接把对象转成JSON字符串存入value，取值时再解析为对象：

const [selectedOp, setSelectedOp] = useState()

// 组件部分代码
<Form.Select 
  onChange={e => {
    const valueStr = e.target.value
    if (valueStr) {
      setSelectedOp(JSON.parse(valueStr))
    } else {
      setSelectedOp(undefined)
    }
  }} 
  className='b' 
  style={{ display: 'inline-block' }} 
  size="lg" 
  aria-label="Default select example"
>
  <option value="">Click to choose message</option>
  {mainNotifications.map((n, i) =>
    <option 
      key={i} 
      name="selectMessage" 
      value={JSON.stringify({message:n.message,type:n.type})}
    >
      hey this is an option tag 
    </option>
  )}
</Form.Select>

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