尝试显示 API 下拉列表的选项集时，选项显示为空白

Question

我的代码如下。

componentDidMount() {
        this.onfetchData();
    }

   async onfetchData() {
        /* global fetch */
       await fetch('https://api.myjson.com/bins/tughj6[enter image description here][1]/')
                .then((response) => response.json())
                .then((responseData) => {
                    this.setState({
                        data: responseData.Level,
                    });
                })
                 .catch(error => {
                        console.log(error);
                        throw error;
                    });
    }
render() {
    console.log('data', this.state.data);
    const Topdata = this.state.data.map((item, index) => {
        return (
        <View style={{ flex: 1 }} key={index}>
           <Text>{item.displayName}</Text>
        </View>  
        );  
    });
    return (
        <View>
        <View style={styles.container1}>
            <Text style={styles.Text1}>Welcome</Text>
        </View>
        <View>
            <Dropdown
            data={Topdata}
            itemPadding={10}
            onChangeText={() => console.log('clicked')}
            /> 
        </View>
        </View>
    );
}

}

下拉菜单中的选项文本不可见。它只是提供一个带有一些隐藏文本的空白下拉列表。我尝试显式更改颜色以查看选项是否可见。没有变化。请帮忙

Answer 1

为下拉列表添加值 Extractor 属性并明确指定名称

<Dropdown
                data={this.state.data}
                label='Select'
                selectedItemColor='#2872c0'
                fontSize={15}
                valueExtractor={({ displayName }) => displayName}
                itemPadding={10}
                onChangeText={() => console.log(this.onChangeText)}
                />