对象对象显示在反应的选择标记中

Question

options（JSON）中的数据是

const options = {“ option”：“ Male”，“ value”：“ M”};Raect代码是

{props.options.map((option) => {
      return (
         <option key={option.value} value={option.option}>
            <Translate>{option.option}</Translate>
         </option>
      );
})}

Answer 1

您正在以错误的方式解释地图。请遵循并以类似方式使用它。确保选项位于数组中。

const values = [{option: 'male': value: 'm'}, {option: 'female': value: 'f'}, {option: 'others': value: 'o'}];

function App() {
 return (
  <div>
    {values.map(val => (
      <option key={val.value} value={val.option}>
         <Translate>{val.option}</Translate>
       </option>
    ))}
  </div>
 );
}

Answer 2

您不需要使用对象的键就可以通过对象的map。只需做：

const options = {option: 'male': value: 'm'} // this is your parsed JSON

function App() {
 return (
  <div>
    <option key={options.value} value={options.option}>
        <Translate>{options.option}</Translate>
     </option>
  </div>
 );
}