Question

我有一个<select>元素，可以从Rails数据模型中提取选项。可以，但是会产生沼泽标准的HTML选择下拉列表。

但是，我想使用react-select组件，这就是我在努力的地方。我可以呈现react-select下拉列表，但选项为空白。我的控制台没有任何错误，我可以在React-Dev-Tools中看到阵列中的51个项目。

这是产生基本HTML下拉列表的代码。

import React from 'react';
import axios from 'axios';
import Select from 'react-select';

class Country extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countries: []
        }
    }

    getCountries() {
        axios.get(`/countries.json`)
            .then(res => {
                const countries = res.data;
                this.setState({ countries });
            })
            .catch(error => console.log(error))
    }

    componentDidMount() {
        this.getCountries()
    }

    render() {
        return (
            <div className="container">
                <select className="taskList">
                    {this.state.countries.map((country) => {
                        return (
                            <option key={country.id} value={country.id}>{country.country_name}</option>
                        )
                    })}
                </select>
            </div>
        )
    }
}

export default Country

这是我正在为react-select尝试的代码，但不起作用

import React from 'react';
import axios from 'axios';
import Select from 'react-select';

class Country extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countries: []
        }
    }

    getCountries() {
        axios.get(`/countries.json`)
            .then(res => {
                const countries = res.data;
                this.setState({ countries });
            })
            .catch(error => console.log(error))
    }

    componentDidMount() {
        this.getCountries()
    }

    render() {
        return (
            let countryItems = this.state.countries.map((country) =>
                <option key={country.id} value={country.id}>{country.country_name}</option>
            );
        return (
            <div className="container">
                <label>Country</label>
                <Select id="country" name="coffee_beans[country_id]" options={countryItems} />
            </div>
        )
    }
}

export default Country

Answer 1

您用来选择组件的选项应该是一个对象数组：

#hash

现在，您正在传递一组组件。所以代替

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

尝试以下方法：

let countryItems = this.state.countries.map((country) =>
  <option key={country.id} value={country.id}>
    {country.country_name} . 
  </option>
);

无法呈现反应选择，只能进行基本HTML选择

1 个答案: