Question

我在我的应用程序中使用了材料下拉列表

<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值我的下拉列表。

Answer 1

假设您正在使用react-native-material-dropdown。

示例：

Dopdown组件：

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

<强>文件：

React native state management

react-native-material-dropdown

Answer 2

您可以通过使用react native“state”来实现此目的。创建一个状态，然后将其分配给Dropdown组件的data属性。然后使用“this.setState（）”方法将responseJson.message.Obj [i] .names设置为状态。

Answer 3

找出您正在使用的data组件所需的<Dropdown />属性的形状（即对象数组）
在componentDidMount
将组件的state视为不可变（不要push直接this.state. dropdownData）

以下是一些使用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
          />
          // ...
        );
      }
      // ...
    }

请参阅：AJAX Requests in React

请参阅：react-native-material-dropdown expected data type

Answer 4

示例代码

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
}

});

Answer 5

你也可以采取这样的方法：

lower_case_table_names

您现在可以使用一些选项来设置状态。在您的示例中，您可以将列表状态设置为一旦呈现后从fetch调用返回的数据。要记住的一件事是，反应当前不支持异步加载。因此，数据必须呈现为空，或者使用一些示例数据，然后在调用任何您想要更新的内容后更新！希望这有所帮助：） https://reactjs.org/docs/faq-ajax.html

将Json响应加载到本机响应中的下拉列表中

5 个答案: