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

在返回数组项之前，我在控制台中编写了内容以检查内容，我已经知道了：

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

那，我在做什么错？我的错误在哪里？我不明白为什么我的选择没有加载由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

编辑II（解决方案）：

最后，按照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>        
    )
}

现在，您如何在此曲线帽中看到选择已正确加载数据：

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

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

非常感谢大家为您提供的帮助！

Answer 1

我不确定选项是否可以作为道具传递。尝试创建html2canvas(document.getElementById("target"), { onrendered: (canvas) => { ... this.setState({canvas: canvas} ); }, ... }) react元素并将其用作子元素

Answer 2

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

选择不显示选项

2 个答案: