Question

我要做的是在我的下拉列表中填写我从API请求的名称。

这是我的组件：

export default class App extends Component {
constructor(props) {
    super(props);

    this.state = {
        my_data: null,
        IND: null,
    };
};

componentDidMount(){
    const query = new URLSearchParams(location.search)
    const access_token = query.get('access_token')
    const namesId = query.get('namesId')

    fetch('http://localhost:8080/api'
        + namesId, {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Credentials': true,
            'Access-Control-Allow-Origin': '*',
            'Authorization': "Bearer " + access_token
        }
    }).then(response=>{
        return response.json();
    }).then(data=>{
        let my_data = [];
        my_data = data;
        let individus = hello.individus;
        let IND = [];
        IND.push({ label: individus[0].lastName, value: individus[0].firstName});
        IND.push({ label: individus[1].lastName, value: individus[1].firstName});
        IND.push({ label: individus[2].lastName, value: individus[2].firstName});
        this.setState({
            my_data: hello,
            IND: IND
        });
    }).catch(function(error) {
        console.log(error)
    });
}

render() {
    const { IND } = this.state;

    return (
        <div>
          <Select
               multi={true}
               joinValues={false}
               options={IND}
               placeholder="Select"
               simpleValue={false}
                />
           </div>

    );
}

奇怪的是，我在下拉列表中看到的是this.state.IND的第一个元素（3个对象在IND中，我在我的控制台上检查过），我不明白我做错了什么

Answer 1

尤里卡！

使用＆＃34; Async选项与Promises＆＃34; react-select解决了我的问题

React - 我无法使用我的data.json（）填充我的下拉列表

1 个答案: