Невозможно увидеть текст в раскрывающемся списке

В моем проекте я использую 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>

Но я не вижу опций роли на веб-странице

enter image description here

Я записал ответ, который я получаю при вызове конечной точки, и я вижу, что параметры роли извлекаютсяenter image description here

Ниже показано, как я устанавливаю параметры роли на веб-странице

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);
    });
}, []);

Почему я не могу увидеть варианты ролей на веб-странице, даже после получения правильного ответа от конечной точки

Поскольку нет ни 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)

Однако на самом деле у него нет "идентификатора" или, по крайней мере, он не является идентификатором модели.

Note: In 2008, Phil Haack discovered a way to obtain data from the outer JSON array. While most browser have implemented countermeasures, it is still better to use a JSON object as "envelope" of the data. That is why a JsonResponse [Django-doc] by default does not allow something else than a dict as outer object. It might thus better to wrap the data in a dictionary and keep safe=True on True.

Вернуться на верх