React-Native-Material-Dropdown 不在前端显示数据

Question

我已经使用 react-native material 下拉菜单从我的 API 中获取数据，如下所示：

 <Dropdown
        label='colors'
        data={this.state.data.colors}
        containerStyle={{width: 50}}
      />
      {console.log("sbHASB",this.state.data.colors)}

然而，当我实施 thi 时，我确实在我的日志中得到了颜色，但它们似乎没有出现在列表中，它似乎是空白的，谁能告诉我为什么不是这样？任何帮助都会很棒，谢谢。

我实现后的日志如下：

 sbHASB ["Blue", "White", "Blue", "White", "Blue", "White", "Blue", "White"]

如果您还需要什么，请告诉我。

Answer 1

假设您使用的是 react-native-material-dropdown，其 github 上的文档建议数据属性应该是具有值键的对象列表。请参阅此处给出的示例。

import React, { Component } from 'react';
import { Dropdown } from 'react-native-material-dropdown';

class Example extends Component {
  render() {
    let data = [{
      value: 'Banana',
    }, {
      value: 'Mango',
    }, {
      value: 'Pear',
    }];

    return (
      <Dropdown
        label='Favorite Fruit'
        data={data}
      />
    );
  }
}

为了使您的列表正常工作，您应该将其转换为匹配此格式，例如

const data = this.state.data.colors.map((color) => ({value: color}))

鉴于您上面的示例，它可能看起来像

<Dropdown
   label='colors'
   data={this.state.data.colors.map((color) => ({value: color}))}
   containerStyle={{width: 50}}
/>

但是我建议在此步骤之前转换数据，例如当您收到来自 api 的响应时。

在 snack.io 上查看此示例，如果您在设备上预览下拉菜单，效果最佳，因为动画无法在 Web 预览中正确显示。

https://snack.expo.io/@dannyhw/dropdown

更新：这是更新的示例，其中包括一个如何动态使用它的示例

export default class App extends React.Component {
  state = {
    data: {colors: []}
  }

  getSomeData() {
    // imagine this is your api call here and it returns a promise that resolves to be a list of colours
    return Promise.resolve(["green", "White", "Blue", "White", "Blue", "White", "Blue", "White"])
  }

  componentDidMount(){
    this.getSomeData().then((result)=> {
      this.setState(state => state.data.colors = result) 
    })
  }

  render() {    
    return (
      <View style={styles.container}>
        <Dropdown
          label='colors'
          data={this.state.data.colors.map((color) => ({value: color}))}
          containerStyle={{width: 150}}
        />
      </View>
    );
  }
}

React-Native-Material-Dropdown 不在前端显示数据

React-Native-Material-Dropdown not showing data on Front-end

react-native

react-native-android

react-native-flatlist