用JSON对象数组中的用户名填充ReactJS选择字段的最简单方法是什么？

xe55xuns 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(121)

我试图在React js中创建我的第一个项目，我需要一些选择选项的帮助。所以，我有这个JSON数据文件：

{
  "users": [
    {
      "id": "1",
      "name": "Anton Tur",
      "username": "nosensejk"   
    },
    {
      "id": "2",
      "name": "Peggy Sonaya",
      "username": "Peggaya"      
    },
    {
      "id": "3",
      "name": "Joseph Maguire",
      "username": "Joemag"      
    }
  ],
  "transports": [
    {
      "id": "T1",
      "name": "MAZ 2105",
      "type": "bus"     
    },
    {
      "id": "T2",
      "name": "MAZ 2106",
      "type": "bus"     
    },
    {
      "id": "T3",
      "name": "MAZ 2205",
      "type": "trolleybus"      
    },
    {
      "id": "T4",
      "name": "MAZ 2307",
      "type": "tram",    
    }
  ]
}

谁能告诉我使用选择字段来显示（例如）用户名的最简单方法？先谢谢你。
下面是我的JS文件中的一些代码

import React from 'react';
import db from './../../node_modules/server/db.json';

function calculate(){

  return(
  <div>
     <select>
      <option value="choose" disabled selected="selected">
         -- Select user --
      </option>
      {db.users.name}
      </select>
   </div>
  );
}
export default calculate;

reactjs

来源：https://stackoverflow.com/questions/76323771/whats-the-easiest-way-to-populate-a-reactjs-select-field-with-user-names-from-a

1条答案

按热度按时间

00jrzges1#

const data = {
  users: [
    {
      id: "1",
      name: "Anton Tur",
      username: "nosensejk"
    },
    {
      id: "2",
      name: "Peggy Sonaya",
      username: "Peggaya"
    },
    {
      id: "3",
      name: "Joseph Maguire",
      username: "Joemag"
    }
  ],
  transports: [
    {
      id: "T1",
      name: "MAZ 2105",
      type: "bus"
    },
    {
      id: "T2",
      name: "MAZ 2106",
      type: "bus"
    },
    {
      id: "T3",
      name: "MAZ 2205",
      type: "trolleybus"
    },
    {
      id: "T4",
      name: "MAZ 2307",
      type: "tram"
    }
  ]
};
export default function Calculate() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <select>
        {data.users.map((user) => {
          return <option key={user.id} value={user.id}>{user.name}</option>;
        })}
      </select>
    </div>
  );
}

请记住，组件名称应以大写字母开头，例如Calculate

赞(0）回复(0）举报 2023-05-28

我来回答

用JSON对象数组中的用户名填充ReactJS选择字段的最简单方法是什么？

1条答案

相关问题

热门标签

最新问答