如何在 react-select 上进行循环？

Question

我在这个 Installation and usage 示例代码之后使用 react-select 创建了一个 select 选项。

有一个数组对象来存储这样的选项：

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

现在，我想让它动态地存储来自其他数据的值，并让它在对象上迭代。

像这样：

const options = [
      { value: flavor, label: flavor },
    ];

value和label上的flavor是一个数组。假设数组是这样存储数据的：

flavor = ['chocolate', 'strawberry', 'vanilla']

因此，每当数组添加新值时，上面数组的对象也会在迭代中添加值。

那么，如何在其中进行迭代..？

或者我应该考虑在组件中弄清楚..？

<Select
  value={selectedOption}
  onChange={this.handleChange}
  options={options}
/>

编辑：我想要的结果是数组中的对象是根据数组值添加的，假设我们在数组中有一个数据，那么const options 像这样存储数据：

const options = [
      { value: flavor, label: flavor },
    ];

那么如果数组存储2个数据，那么const options就是这样：

const options = [
      { value: flavor, label: flavor },
      { value: flavor, label: flavor },
    ];

这样做的目的是使 select 上的下拉选项具有动态值。

Answer 1

您可以使用 .map 函数来动态创建您的选项:)

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';


const options = [
    { value: 'flavor', label: 'flavor' },
    { value: 'yummy', label: 'yummy' },
    { value: 'red', label: 'red' },
    { value: 'green', label: 'green' },
    { value: 'yellow', label: 'yellow' },
];

class App extends Component {
    state = {
        selectedOption: 'None',
    }

    handleChange = ({ target }) => {
        this.setState({
            selectedOption: target.value,
        });
    }

    render = () => (
        <div>
            <span>{this.state.selectedOption}</span>
            <select
            value={this.state.selectedOption}
            onChange={this.handleChange}
            >
            {options.map(({ value, label }, index) => <option value={value} >{label}</option>)}
            </select>
        </div>
    );
}

render(<App />, document.getElementById('root'));

工作示例在这里https://stackblitz.com/edit/react-select-example

Answer 2

我已经通过以下弄清楚了这一点，这是我根据我的问题想要得到的答案：

const options = [];
    obj = {}

    for(var i = 0; i < flavor.length; i++) {
      var obj = {};

      obj['value'] = flavor[i];
      obj['label'] = flavor[i];
      options.push(obj);
    }

如何在 react-select 上进行循环？

How to make for loop on react-select?

javascript

ecmascript-6

reactjs

react-select