Estoy usando un menú desplegable de material en mi aplicación

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

Busco un objeto JSON como este y funciona bien.

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

Ahora necesito agregar los valores responseJson.message.Obj[i].name a mi lista desplegable

2
unknown123 23 feb. 2018 a las 13:57

5 respuestas

La mejor respuesta

Supongamos que está utilizando react-native-material-dropdown.

Ejemplo:

El componente Dropdown debe representarse de la siguiente manera:

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

Código de solicitud:

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 oct. 2019 a las 12:22

También podría adoptar un enfoque como este:

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?

Ahora tiene algunas opciones para establecer el estado. A partir de su ejemplo, establecería el estado del estado de su lista a los datos devueltos por la llamada de recuperación una vez que se haya procesado. Una cosa rápida a tener en cuenta es que reaccionar no admite la carga asincrónica actualmente. Por lo tanto, los datos deben mostrarse vacíos o con algunos datos de muestra y luego actualizarse una vez que se haya realizado la llamada a lo que desee actualizar. Espero que esto ayude un poco :) https://reactjs.org/docs/faq-ajax.html

0
Austin Efnor 4 mar. 2018 a las 20:41

Puede lograr esto usando reaccionar "estado" nativo. Cree un estado y luego asígnelo a la propiedad de datos del componente Desplegable. Luego establezca responseJson.message.Obj [i] .names al estado utilizando el método "this.setState ()".

2
erkan 23 feb. 2018 a las 11:46
  • Descubra cuál es la forma de la propiedad data necesaria (es decir, matriz de objetos) para el componente <Dropdown /> que está utilizando
  • Realizar llamadas de búsqueda dentro de componentDidMount
  • Trate el state de su componente como si fuera inmutable (no push directamente a this.state. dropdownData)

Aquí hay un código de muestra usando react-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
          />
          // ...
        );
      }
      // ...
    }

Consulte: Solicitudes AJAX en reacción

Ver: react- tipo de datos esperado desplegable de material nativo

2
Andres C. Viesca 3 mar. 2018 a las 11:32

Código de muestra

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 feb. 2019 a las 09:20