JSX 将对象传递给 React 中 jsx 标记的值

Question

我正在尝试将一个对象传递给 react 中的 jsx 标记的值

• 我将标签选项的值设置为一个对象

• onChange 我在标签<Form.Select> 中得到了值，并用该值设置了本地状态

• 我在控制台记录了本地状态，但它返回了 [object Object]

• 我以这种方式对其进行了 JSON.stringify：

  console.log(JSON.strigify(obj))

  它返回：“[object Object]”

我做错了什么？

这里是 react 组件的状态：

const [selectedOp, setSelectedOp] = useState()

这是控制台日志：

console.log(selectedOp)
console.log(JSON.stringify(selectedOp))

这是html代码：

<Form.Select onChange={e => setSelectedOp(e.target.value)} className='b' style={{ display: 
    'inline-block' }} size="lg" aria-label="Default select example">
     <option>Click to choose message</option>
     {mainNotifications.map((n, i) =>
     <option key={i} name="selectMessage" value={{message:n.message,type:n.type}}>hey this is an option tag </option>
     )}
</Form.Select>

Answer 1

您的值是字符串类型，而不是对象，否则它会打印为 [object, object]，因此您需要对对象值进行字符串化

value=JSON.stringify({message:n.message,type:n.type})

查看下面的示例

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [val, setVal] = useState();

  const changeHandler =value => {
    console.log(value);
    setVal(value);
  
  };

  return (
    <div>
      <select onChange={e => changeHandler(e.target.value)}>
        <option value={JSON.stringify({value: 'one', type: 'number' })} >none</option>
        <option value={JSON.stringify({value: 'one', type: 'number' })}>one</option>
      </select>
      {val&&console.log(JSON.parse(val))}
    </div>
  );
}

Answer 2

value={{message:n.message,type:n.type}}

您不能将对象设置为值，这将使值本身成为[object Object]的字符串，这就是您所看到的（当您将状态字符串化时，它之前已经是[object Object]），您可以存储索引或标识符值，并在数组中搜索对象，如果要对其进行 JSON 字符串化，则还必须对选项的值进行处理

const mainNotifications = [
  { message: "my msg", type: 1 },
  { message: "my msg 2", type: 3 }
];

export default function App() {
  const [selectedOp, setSelectedOp] = React.useState(null);
  const onChange = (e) => {
    setSelectedOp(
      mainNotifications.find((_, i) => e.target.value === i.toString())
    );
  };

  React.useEffect(() => {
    console.log(selectedOp);
  }, [selectedOp]);

  return (
    <select onChange={onChange}>
      <option>Click to choose message</option>
      {mainNotifications.map((n, i) => (
        <option key={i} name="selectMessage" value={i}>
          {n.message}
        </option>
      ))}
    </select>
  );
}

https://codesandbox.io/s/red-resonance-iyrnb