React生成选择选项

Question

它是 SearchForm.js 类，它使用axios

获取渲染前的select值

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class SearchForm extends React.Component {

        constructor(props) {
            super(props)

            this.state = {
                position: '',
                area: '',
                period: '1',
                experience: {
                    type: Array,
                    default: () => []
                }
            }

            this.handleExperienceChange = this.handleExperienceChange.bind(this);

        }

        componentDidMount() {
            axios({
                    method: 'GET',
                    url: 'https://example.com/dictionaries/',
                    headers: {
                        'User-Agent': 'React App/1.0 (tatyana.fomina.1986@gmail.com)',
                        'HH-User-Agent': 'React App/1.0 (tatyana.fomina.1986@gmail.com)',
                        'Content-Type': 'application/x-www-form-urlencoded',
                    }
                })
                .then((response) => {
                    console.log(response.data.experience);
                    this.setState({
                        experience: response.data.experience
                    });
                    console.log(this.experience);
                })
                .catch(function(error) {
                    console.log(error);
                });
        }


        handleExperienceChange(e) {
            this.setState({
                [e.target.name]: e.target.value
            });
        }


        render() {
            return ( <
                form className = 'form search-form'
                onSubmit = {
                    this.handleSubmit
                } >
                <
                div className = "form-row" >


                <
                div className = "form-group col-md-2" >
                <
                label htmlFor = "experience" > Experience *< /label> <
                select className = "form-control"
                name = "experience"
                id = "experience"
                onChange = {
                    this.handleExperienceChange
                }
                value = {
                    this.state.experience
                } >

                {
                    this.state.experience.length > 0 &&
                    <
                    option
                    key = {
                        this.state.experience.id
                    }
                    value = {
                        this.state.experience.name
                    } > {
                        this.state.experience.name
                    } <
                    /option> }

                    <
                    /select> < /
                    div >


                    <
                    div className = "form-row" >
                    <
                    div className = "form-group col-md-12 pt-3" >
                    <
                    input id = 'form-button'
                    className = 'btn btn-primary'
                    type = 'submit'
                    placeholder = 'Send' / >
                    <
                    /div> < /
                    div > <
                    /form>
                )
            }
        }

        export {
            SearchForm
        }

console.log(response.data.experience);显示包含id和name值的数组

但console.log(this.experience);显示undefined，options保持为空。如何使用值呈现选项并将第一个选项的值设置为此选择的默认值？

Answer 1

重新显示没有正确显示状态的console.log，可能是因为setState是异步的。尝试将console.log（this.state.experience）放在setState的回调中，而不是现在，看看会发生什么。

关于不起作用的选择，似乎您对选择选项和用户选择的值使用一个状态变量...

最后一件事：我只看到一个选项标记，而不是axios调用返回的所有值的多个选项标记。

我希望这会有所帮助。