選擇不顯示選項

Question

我正在嘗試動態加載選擇的選項，因此我創建了一個傳遞給選擇的選項數組。

構造函數、處理和獲取數據的代碼如下：

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

在返回數組項之前，我在控制台中寫入內容以檢查內容，我得到了這個：

所以，數組不為空。 但是在視圖中我沒有在選擇中加載任何東西。

的，我做錯了什么？ 我的錯誤在哪里？ 我不明白為什么我的選擇沒有加載函數 season_options(); 返回的數組的內容；

編輯我：

我已經修改了我的初始代碼，因此為了返回一個 json 對象數組，我返回了一個帶有每個選項代碼的字符串數組。

現在，我在 render 方法中的代碼是這樣的：

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

而且，我檢查了我有這個頁面的代碼：

所有選項都出現在選擇中，但在選擇中什么都沒有！！！

發生了什么？ 為什么選擇中沒有加載選項？ :S

編輯二（解決方案）：

最后，按照 BearCoder 的建議，這是正確運行的 render 方法的代碼：

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

現在，您如何在這個 screep cap 中看到選擇已正確加載數據：

錯誤是像字符串一樣返回選項。 這些選項必須不帶引號返回： *return(<option key = {season.id} value = {season.id}>{season.description}</option>)*

因此，您有一個不是字符串的數組，而是*<option key = x value = x>description</option>*

Answer 1

我不確定選項是否可以作為道具傳遞。 嘗試創建<option>反應元素並將它們用作子元素

Answer 2

據我所知，您必須在渲染中包含 return 。