React-Native-Material-Dropdown не отображает данные на внешнем интерфейсе - PullRequest
Новая
       27

React-Native-Material-Dropdown не отображает данные на внешнем интерфейсе

0 голосов
/ 13 февраля 2020

Я использовал раскрывающийся список реактивных материалов для получения данных из моего API следующим образом: 

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

Однако, когда я реализую это, я получаю цвета в своем журнале, но они, кажется, не отображаются в списке, кажется, пустым, может кто-нибудь сказать, пожалуйста, почему это не так? Любая помощь была бы великолепна, спасибо.

мои журналы после внедрения выглядят следующим образом: 

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

Скажите, если вам требуется что-нибудь еще.

1 Ответ

1 голос
/ 13 февраля 2020

Предполагая, что вы используете response-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, раскрывающийся список будет работать лучше, если вы Предварительный просмотр на устройстве, так как анимация не отображается должным образом в предварительном просмотре в Интернете.

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