无法看到下拉列表中的文字

Question

所以在我的项目中我使用react作为前端，django作为后端。我有以下型号

class Role(models.Model):
    ROLE_CHOICES = (
        ('Recruiter', 'Recruiter'),
        ('Manager', 'Manager'),
        ('Business Development Partner', 'Business Development Partner'),
        ('Business Development Partner Manager', 'Business Development Partner Manager'),
        ('Account Manager', 'Account Manager'),
    )
    role = models.CharField(max_length=50, choices=ROLE_CHOICES)

    def __str__(self):
        return self.name

我创建了以下视图来获取我定义到前端的角色选择

@csrf_exempt
def role_choices(request):
    roles = [role[1] for role in Role.ROLE_CHOICES]
    return JsonResponse(roles, safe=False)

这是我为其创建的端点

path('roles/', role_choices, name='roles_list'),

现在在我的前端，我有一个表单，其中一个字段是一个角色，单击该表单时应显示一个填充有角色选择的下拉列表（仅在此处粘贴所需的代码）

<h2>Role</h2>
        <label>
          Select Role:
          <select
            name="role"
            value={userData.role}
            onChange={handleInputChange}
          >
            <option value="">Select</option>
            {roleOptions.map(role => (
              <option key={role.id} value={role.role}>
                {role.role}
              </option>
            ))}
          </select>
        </label>
        <br />
        <button type="submit" class="btn btn-default btn-sm">Submit</button>
      </form>
    </div>

但是我在网页上看不到角色选项

我已记录调用端点时收到的响应，并且我看到正在获取角色选项

下面的代码显示了我如何在网页上设置角色选项

const [roleOptions, setRoleOptions] = useState([]);

  useEffect(() => {
    // Fetch role options from backend when component mounts
    axios.get('http://127.0.0.1:8000/roles/')
    .then(response => {
      // Check if response data is an array
      if (Array.isArray(response.data)) {
        setRoleOptions(response.data);
        console.log(response.data);
      } else {
        console.error('Invalid response data:', response.data);
      }
    })
    .catch(error => {
      console.error('Error fetching roles:', error);
    });
}, []);

我不明白为什么我无法在网页上看到角色选择，即使我从端点获得了正确的响应

Answer 1

因为没有

id

或

role

，所以您只是返回了一个字符串列表。你应该将它们包装在字典中，例如：

@csrf_exempt
def role_choices(request):
    roles = [{'id': key, 'role': role} for key, role in Role.ROLE_CHOICES]
    return JsonResponse(roles, safe=False)

然而，它并没有真正的“id”，或者至少它不是模型的 id。

---

注意：2008 年，Phil Haack 发现了一种从外部 JSON 数组获取数据的方法。 虽然大多数浏览器已经实施了对策，但最好还是使用 JSON 对象作为数据的“信封”。这就是为什么一个

JsonResponse

 ^{[Django 文档]} 默认情况下不允许除

dict

之外的其他东西作为外部对象。它可能 因此最好将数据包装在字典中并将

safe=True

保留在

True

上。