将数据从Django Rest框架显示到DropDownPicker React Native

Question

我想将Django Rest Framework中的数据显示到DropDownPicker React-Native (https://github.com/hossein-zare/react-native-dropdown-picker)中，这是我的代码：

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, Image, FlatList, Button, TouchableOpacity } from "react-native";
import client from "./../../api/client";
import DropDownPicker from 'react-native-dropdown-picker';


const Droplo = ({navigation, route}) => {
  const [detailha, setDetailha] = useState("");
  const [value, setValue] = useState(null);
  let controller;

  const getDetailha = async (url) => {
    try {
      const response = await client.get(url);
      if (!response.ok) {
        setDetailha(response.data);
        console.log(response.data)
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(()=>{ getDetailha('/habilidad/'); }, [])

  return (
      <View>
        <DropDownPicker
            items={detailha}
            controller={instance => controller = instance}
            onChangeList={(items, callback) => {
                new Promise((resolve, reject) => resolve(setDetailha(items)))
                    .then(() => callback())
                    .catch(() => {});
            }}
            defaultValue={value}
            onChangeItem={item => setValue(item.nombre_habilidad)}
        />
      </View>
    );
  }

export default Droplo;

数据为：

enter image description here

错误是：

enter image description here

谢谢!

Answer 1

您的数据格式不正确。

请看这一段：https://github.com/hossein-zare/react-native-dropdown-picker#single-item

属性item的格式应该是这样的：

[
  { label: 'item-label', value: 'item-value', icon: () => <span>your-icon</span> }, 
  ... 
]

因此，您可以更改服务器的响应，或者从响应数据创建一个新的数组并传递item prop。

responseData.map(elem => ({label: elem.nombre_habilidad, value: elem.nombre_habilidad})

此外，您应该更改状态detailha的初始值，因为item属性需要array类型。(在接口拉取之前，react-native-dropdown-picker组件会使用初始值进行渲染)您可以使用空数组进行初始化：

const [detailha, setDetailha] = useState([]);

此更改将修复您提供的错误