react-native - React-Native-Material-Dropdown 未在前端显示数据

Question

我使用 react-native 材料下拉菜单从我的 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"]

如果您需要其他任何东西，请告诉我。

标签： react-nativereact-native-androidreact-native-flatlist

Answer 1

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

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 上的此示例，如果您在设备上预览它，下拉菜单效果最佳，因为动画无法在网络预览中正确显示。

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