选择不显示选项

Question

I'm trying to load the options of a select dynamically so I create an array of options which is passed to the select.

The code of the constructor, handle and get data is next:

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();
}

And the render function is:

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!!!
            }     
);

Before to return the array items, I write the content in console to check the content and I've got this:

So, the array is not empty. But in the view I don't load anything in the select.

The, what am I doing wrong? Where is my mistake? I don't understand why my select is not loaded with the conten of the array returned by the function season_options();

Edit I:

I have modified my initial code so insted of return an array of json objects I return an array of strings with the code of each option.

Now, my code in render method is like that:

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>
)}

And, I check the code of the page I've got this:

All the options appears inside the select, but in the select there is nothing!!!

What's happend? Why the options are not loaded in the select? :S

Edit II (Solution):

Finally, following the advice of BearCoder this is the code of render method which works correctly:

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>        
    )
}

Now, how you can see in this screep cap the select is loaded correctly with the data:

The error was to return the options like a string. These options have to been returned without quotes: *return(<option key = {season.id} value = {season.id}>{season.description}</option>)*

Therefore, you've got an array not of strings but *<option key = x value = x>description</option>*

Answer 1

I am not sure if options can be passed as prop. Try to create <option> react elements and use them as children

Answer 2

据我所知，您必须在渲染中包含 return 。