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

Question

I am using REST API to fetch the data from server and I want to set that data in a multiple select picker in React Native but I am getting an error. Here is my response from the server:

[
  {
    "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"
  }]

I want to set the name in the drop down and select multiple value from it. Here is my code:

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
  }
});

But it is showing no item to display.

Answer 1

1. Your mapping is wrong. It should be langString.map(item => ({ name: item.name, id: item.id })) .
2. items prop should be this.state.LangPickerValueHolder .