Я использую раскрывающийся список материалов в моем приложении

<Dropdown 
  baseColor='white'
  itemColor='white'
  label='Select Cluster'
/>

Я получаю объект JSON, как это, и он работает нормально.

  fetch('url', {  
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      username : "admin"
    })
  }).then((response) => response.json())
  .then((responseJson) => {
    var count = Object.keys(responseJson.message.Obj).length;
    for(var i=0;i<count;i++){
      console.log(responseJson.message.Obj[i].name) // I need to add 
      //these names to dropdown
    }
  })
  .catch((error) => {
    console.error(error);
  });

Теперь мне нужно добавить значения responseJson.message.Obj[i].name в мой выпадающий список.

2
unknown123 23 Фев 2018 в 13:57

5 ответов

Лучший ответ

Предположим, что вы используете response-native-material-dropdown.

< Сильный > Пример:

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

<Dropdown
  baseColor='white'
  itemColor='white'
  label='Select Cluster'
  data={this.state.drop_down_data} // initialise it to []
/>

Код заявки:

fetch('url', {
  ...
}).then((response) => response.json())
.then((responseJson) => {
  var count = Object.keys(responseJson.message.Obj).length;
  let drop_down_data = [];
  for(var i=0;i<count;i++){
    console.log(responseJson.message.Obj[i].name) // I need to add 
    drop_down_data.push({ value: responseJson.message.Obj[i].name }); // Create your array of data
  }
  this.setState({ drop_down_data }); // Set the new state
})
.catch((error) => {
  console.error(error);
});

< Сильный > Doc:

11
anoNewb 22 Окт 2019 в 12:22

Вы также можете использовать такой подход:

var Somedata = {
            "data" : [
                {
                "baseColor": "white",
                    "moreData":[
                        {
                            "id" : 118,
                        }
                    ]
                },
                {
                "baseColor": "grey",
                    "moreData": [
                        {
                            "id": 1231231,
                        }
                    ]
                }
            ]
        }
const renderData = someData.data.map((data) => {
        return data.moreData.map(brand => {
            strColor = data.baseColor;
            console.log("Individual Data :" + strColor)
                return `${data.baseColor}, ${moreData.id}`
                //setState here?
        }).join("\n")
    }).join("\n")
//setState here?

Теперь у вас есть несколько вариантов, которые вы можете установить состояние. Из вашего примера вы бы установили состояние вашего списка для данных, возвращаемых из вызова выборки после его рендеринга. Нужно помнить, что реакция в настоящее время не поддерживает асинхронную загрузку. Поэтому данные должны отображаться как пустые или с некоторыми примерами данных, а затем обновляться после того, как был сделан вызов тому, что вы хотите обновить! Надеюсь, это поможет немного :) https://reactjs.org/docs/faq-ajax.html

0
Austin Efnor 4 Мар 2018 в 20:41

Вы можете добиться этого, используя реагировать родное «состояние». Создайте состояние и назначьте его свойству данных компонента Dropdown. Затем установите responseJson.message.Obj [i] .names в состояние с помощью метода this.setState ().

2
erkan 23 Фев 2018 в 11:46
  • Узнайте, какова форма свойства data, необходимого (т. Е. Массива объектов) для компонента <Dropdown />, который вы используете
  • Делать вызовы внутри componentDidMount
  • Рассматривайте state вашего компонента так, как если бы он был неизменным (не push напрямую к this.state. dropdownData)

Вот пример кода с использованием response-native-material-dropdown:

    class Example extends React.Component {
       // Use constructor to assign initial state
       constructor(props) {
         this.state = {
           dropdownData: []
         };
       }

      componentDidMount() {
        fetch('url', {  
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            username : "admin"
          })
        })
        .then((response) => response.json())
        .then((responseJson) => {
          var count = Object.keys(responseJson.message.Obj).length;
          // We need to treat this.state as if it were immutable.
          // So first create the data array (tempDataArray) 
          var tempDataArray = [];
          for(var i=0;i<count;i++){
            // Note: react-native-material-dropdown takes an Array of Objects
            tempDataArray.push({
              value: responseJson.message.Obj[i].name
            });
          }
          // Now we modify our dropdownData array from state
          this.setState({
            dropdownData: tempDataArray
          });
        })
        .catch((error) => {
          console.error(error);
        });
      }

      // ...
      render() {
        return (
          // ...
          <Dropdown 
            baseColor='white'
            itemColor='white'
            label='Select Cluster'
            data={this.state.dropdownData} // Use dropdownData for the data prop
          />
          // ...
        );
      }
      // ...
    }

См. запросы AJAX в React

См. response- ожидаемый тип данных с нативным материалом

2
Andres C. Viesca 3 Мар 2018 в 11:32

Образец кода

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from 'react-native';

export default class AddInventory extends Component {

 constructor(props)
 {

   super(props);

   this.state = { 

   isLoading: true,

   PickerValueHolder : ''

  }
 }

 componentDidMount() {

      return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            isLoading: false,
            dataSource: responseJson
          }, function() {
            // In this block you can do something with new state.
          });
        })
        .catch((error) => {
          console.error(error);
        });
    }

    GetPickerSelectedItemValue=()=>{

      Alert.alert(this.state.PickerValueHolder);

    }

 render() {

   if (this.state.isLoading) {
     return (
       <View style={{flex: 1, paddingTop: 20}}>
         <ActivityIndicator />
       </View>
     );
   }

   return (

    <View style={styles.MainContainer}>

          <Picker
            selectedValue={this.state.PickerValueHolder}
            onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
            { this.state.dataSource.map((item, key)=>(
            <Picker.Item label={item.fruit_name} value={item.fruit_name} key={key} />)
            )}

          </Picker>

          <Button title="Click Here To Get Picker Selected Item Value" onPress={ this.GetPickerSelectedItemValue } />

    </View>

   );
 }
}

const styles = StyleSheet.create({

MainContainer :{

justifyContent: 'center',
flex:1,
margin: 10
}

});
1
Abhi 20 Фев 2019 в 09:20