Select不显示选项

Question

我正在尝试动态加载select的选项，所以我创建了一个选项数组，这些选项被传递给select。

下面是构造函数、句柄和获取数据的代码：

constructor(){
    super();
    this.state = {
        loaded: false,
        selected_season: null,
        seasons: {},
        competitions: {},
        gameday: {}
    }
    this.handleChange = this.handleChange.bind(this);
}

handleChange = selected_season => {
    this.setState({ selected_season });
    console.log(`Option selected:`, selected_season);
  };

async getData(){
    let params = [{"###id_league###": 1}];
    let seasons = await getDataFromServer(URL_FEB_API, HOMELF1_SEASON, params);
    let gameday = await getDataFromServer(URL_FEB_API, RESULT_GAMEDAY_LF1, params);
    this.setState({
        selected_season: seasons["data"]["seasons"][0]["id"],
        seasons: seasons["data"]["seasons"],
        gameday: gameday,
        loaded: true            
    });         
}

componentDidMount(){
    this.getData();
}

渲染功能是：

render(){
    let gameday = this.state.loaded ? this.state.gameday["data"]["last_game_day"][0] : [];
    let season_options = () => {
        let items = this.state.seasons.map(season => {
            return{
                value: season.id,
                label: season.description
            }
        });
        items.map(item => {
            console.log(item);
        });
        return items;
}

    return(
        <div style = {{marginTop: 15 + 'px'}}>
            {
                (this.state.loaded) ?
                    <Form.Row>
                            <Form.Label column md = "1">Temporada</Form.Label>
                            <Col md = "3">
                                <Form.Control as="select" 
                                    controlid = "season"
                                    options = {season_options()}
                                    value = {this.state.selected_season}
                                    onChange = {this.handleChange}
                                />
                            </Col>
                            <Form.Label column md = "1">Competición</Form.Label>
                            <Col md = "3">
                                <Form.Control as="select" controlid = "season">
                                    <option>Selecciona Competición</option>
                                    <option>...</option>
                                </Form.Control>
                            </Col>
                            <Form.Label column md = "1">Jornada</Form.Label>
                            <Col md = "3">
                                <Form.Control as="select" controlid = "season">
                                    <option>Selecciona Jornada</option>
                                    <option>...</option>
                                </Form.Control>
                            </Col>
                    </Form.Row>
                :
                ""  //If data is not loaded -> Don't do anything!!!
            }     
);

在返回数组项之前，我在控制台中写入内容以检查内容，并得到如下结果：

​

​

因此，数组不是空的。但是在视图中，我没有在select中加载任何内容。

​

​

我做错什么了？我的错误在哪里？我不明白为什么我的select没有加载函数season_options()返回的数组的内容；

编辑I:

我修改了我的初始代码，以便返回一个json对象数组，然后返回一个字符串数组，其中包含每个选项的代码。

现在，呈现方法中的代码如下所示：

render(){
    let gameday = this.state.loaded ? this.state.gameday["data"]["last_game_day"][0] : [];
    const season_options = () => {
        let items = this.state.seasons.map(season => {
            return("<option value = " + season.id + ">" +  season.description + "</option>");
        });
        items.map(item => {
            console.log(item);
        });
        return items;
    };

    return(
        <div style = {{marginTop: 15 + 'px'}}>
            {
                (this.state.loaded) ?
                    <Form.Row>
                            <Form.Label column md = "1">Temporada</Form.Label>
                            <Col md = "3">
                                <Form.Control as="select" 
                                    controlid = "season"
                                    value = {this.state.selected_season}
                                    onChange = {this.handleChange}
                                >
                                    {season_options()}
                                </Form.Control>
                            </Col>
                    </Form.Row>
                :
                ""  //If data is not loaded -> Don't do anything!!!
            }     
       </div>
)}

然后，我检查页面的代码--我得到的是：

​

​

所有选项都出现在select中，但是在select中没有任何选项！

发生什么事了？为什么选择:S中没有加载这些选项？

编辑II (解决方案)：

最后，按照BearCoder的建议，以下是正确工作的呈现方法代码：

render(){
    let gameday = this.state.loaded ? this.state.gameday["data"]["last_game_day"][0] : [];
    const season_options = () => {
        let items = this.state.seasons.map(season => {
            return(<option key = {season.id} value = {season.id}>{season.description}</option>);
        });
        return items;       
    };

    const Header = () => 
        <h4 style={{ borderRadius: '0.25em', textAlign: 'center', color: '#FFFFFF', backgroundColor: '#091e36', padding: '0.5em' }}>
            Liga DIA /  {gameday.name} / Jornada {gameday.num_jornada}
        </h4>

    return(
        <div style = {{marginTop: 15 + 'px'}}>
            {
                (this.state.loaded) ?
                    <Form.Row>
                            <Form.Label column md = "1">Temporada</Form.Label>
                            <Col md = "3">
                                <Form.Control as="select" 
                                    controlid = "season"
                                    value = {this.state.selected_season}
                                    onChange = {this.handleChange}
                                >
                                    {season_options()}
                                </Form.Control>
                            </Col>
                    </Form.Row>
                :
                ""  //If data is not loaded -> Don't do anything!!!
            }                       
        </div>        
    )
}

现在，如何在这个屏幕盖中看到select正确地装载了数据：

​

​

错误是像返回字符串一样返回选项。这些选项必须不带引号返回：*return(<option key = {season.id} value = {season.id}>{season.description}</option>)*

因此，您得到的数组不是字符串，而是*<option key = x value = x>description</option>*

Answer 1

我不知道是否可以将各种选择作为支柱通过。尝试创建<option> react元素并将它们用作子元素

Answer 2

正如我所知，您必须包括返回内部渲染。