javascript - (REACT) 如何从数组创建动态选择选项列表

Question

因此，我希望在 .js 文件中创建一个动态构建的选择选项列表，该列表是从数组列表生成的，如下面代码的“选项”部分所示。我该怎么做？:

const kvArray = [
  {children: 'Country List', value: 0}, 
  {children: 'France', value: 10}, 
  {children: 'England', value: 20}, 
  {children: 'Peru', value: 30}
].map ((keySelect, index) => ({
  id: index,
  name: keySelect,
}));

class FieldsPage extends React.Component {

  onFormSubmit = () => {
    const { dynamicFields, fields } = this.props;

    const values = {
      ...fields.$values(),
      concepts: {
        ...dynamicFields,
      },
    };
  }

  render() {
    const { fields } = this.props;
    const { disabled, error, submittedValues, selectValue } = this.state;
    
    return (
      <View>
        <Form onSubmit={this.onFormSubmit}>
          <Block>
            <Select
              {...fields.donation}
              disabled={disabled}
              label="Donation"
              options={[
                // What I want to happen here: build selection options by iterating through item, i.e.
                {kvArray.map(item =>
                    { children: item.name.children, value: item.name.value},
                )}

              ]}
            />
          </Block>
          <Button disabled={disabled} type="submit">
            <FormattedMessage {...buttonsMessages.submit} />
          </Button>

        </Form>
      </View>
    );
  }

}

Answer 1

您可以在数组中设置选项并对其进行迭代。
例如

setFruits(){
      const fruits = [<option key={1} value="grapefruit">Grapefruit</option>,<option key={2} value="lime">Lime</option>,<option key={3} value="coconut">Coconut</option>,<option key={4} value="mango">Mango</option>];
      this.setState({fruits:fruits});

    }
render() {

        return (
            <div>
                <select>
                  {this.state.fruits}
                </select>                
            </div>
        );
    };