如何在ReactJS选择框中快速填充JSON数组内的用户名？

你的问题在于db.users是一个数组，不能直接通过.name获取值，需要遍历数组来生成对应的<option>元素。以下是最简单的实现方式：

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

function Calculate() {
  return (
    <div>
      <select>
        <option value="choose" disabled selected>
          -- 选择用户 --
        </option>
        {/* 遍历users数组，生成每个用户的option */}
        {db.users.map(user => (
          <option key={user.id} value={user.id}>
            {user.username} {/* 这里展示用户名，如需展示全名可替换为user.name */}
          </option>
        ))}
      </select>
    </div>
  );
}

export default Calculate;

关键点说明： #

• 使用Array.map()遍历db.users数组，为每个用户生成独立的<option>元素
• 必须给每个<option>添加key属性，React要求列表项要有唯一标识，这里用用户的id是最优选择
• value属性设为用户的id，方便后续获取选中的用户ID；显示内容用user.username就是你需要的用户名，若要展示用户全名，替换为user.name即可
• 组件名改为首字母大写的Calculate，符合React组件的命名规范，避免与HTML标签冲突

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