如何使用c#接口在reactjs下拉列表中绑定性别

public interface IGenderService
{
    List<string> GetGenders();
}

public class GenderService : IGenderService
{
    public List<string> GetGenders()
    {
        return new List<string> { "男", "女" };
    }
}

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const GenderDropdown = () => {
  const [genders, setGenders] = useState([]);

  useEffect(() => {
    const fetchGenders = async () => {
      const response = await axios.get('/api/genders'); // 这里的/api/genders是后端接口的URL
      setGenders(response.data);
    };

    fetchGenders();
  }, []);

  return (
    <select>
      {genders.map((gender, index) => (
        <option key={index} value={gender}>{gender}</option>
      ))}
    </select>
  );
};

export default GenderDropdown;

[Route("api/genders")]
[ApiController]
public class GenderController : ControllerBase
{
    private readonly IGenderService _genderService;

    public GenderController(IGenderService genderService)
    {
        _genderService = genderService;
    }

    [HttpGet]
    public ActionResult<List<string>> GetGenders()
    {
        var genders = _genderService.GetGenders();
        return Ok(genders);
    }
}