从服务器（REST API）获取数据并在 React Native 中的多选选择器中设置数据

Question

我正在使用 REST API 从服务器获取数据，并且我想在 React Native 的多选选择器中设置该数据，但我遇到了错误。这是我从服务器收到的回复：

[
  {
    "id": 22,
    "name": "Business",
    "slug": "business"
  },
  {
    "id": 17,
    "name": "Digital Marketing",
    "slug": "digital-marketing"
  },
  {
    "id": 23,
    "name": "Fun & Lifestyle",
    "slug": "fun-lifestyle"
  },
  {
    "id": 16,
    "name": "Mobiles",
    "slug": "mobiles"
  }]

我想在下拉列表中设置名称并从中选择多个值。这是我的代码：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import MultiSelect from 'react-native-multiple-select';

export default class PostJob extends React.Component {
  state = {
     LangPickerValueHolder: [],
    LangKnown: []
  }

  componentDidMount () {
    fetch('taxonomies/get_taxonomy?taxonomy=project_cat').then(response => response.json())
        .then(responseJson => {
          let langString = responseJson;

          let LangPickerValueHolder = langString.map((name, id) => { return { name, id }; });
          this.setState({
            LangPickerValueHolder
          });
          console.log(langArray);
        }).catch(error => {
          console.error(error);
        });
  }

  render () {
    return (
      <View style={styles.container}>
        <MultiSelect
          ref={(component) => { this.multiSelect = component; }}
          onSelectedItemsChange={(value) =>
            this.setState({ LangKnown: value })
          }
          uniqueKey="id"
          items={this.state.langString}
          selectedItems={this.state.LangKnown}
          onChangeInput={ (text) => console.log(text)}
          displayKey = 'name'
          submitButtonText="Submit" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'white',
    padding: 8
  }
});

但它没有显示任何项目。

Answer 1

1. 您的映射有误。应该是langString.map(item => ({ name: item.name, id: item.id }))。
2. items 属性应该是 this.state.LangPickerValueHolder。