Question

我正在尝试将选择器值从服务器获取到我的react-native项目。这是我的JSON数据。如何为选择器组件获取它？我从网络结果中尝试了所有d方法。但我只有一个黑屏。请帮助

{
"MFBasic": {
    "SkinTones": "DARK,FAIR,VFAIR",
    "Build": "SLIM,ATHLETIC,PLUMPY",
    "Gender": "F,M,T",
    "Genre": "ACTION,COMEDY,DRAMA",
    "Languages": "ENG,HINDI,TAM",
    "MediaModes": "ADS,MOVIES,SHORTFILMS",
    "Tags": "BIKES,HOME,JEWELLARY"
},
"Result": "Successfully Loaded MF Basic Details",
"Code": 100

}

App.js

export default class App extends Component {


    state = {

        PickerValueHolder:[],
        Gender:'',
        }
   componentDidMount() {
      fetch('https://movieworld.sramaswamy.com/GetMFBasicDetails.php', {
       method: 'POST',
       headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        },

        }).then((response) => response.json())
        .then((responseJson) => {

           let PickerValueHolder = responseJson.MFBasic;
           this.setState({ PickerValueHolder }); // Set the new state

           }).catch((error) => {
           console.error(error);
          });
         }



     render() {
        return (
          <View style = {styles.MainContainer}>
           {<Picker
            selectedValue={this.state.Gender}
            onValueChange={(itemValue, itemIndex) => 
            this.setState({Gender:itemValue})} >
            { this.state.PickerValueHolder.map((item, key)=>
            <Picker.Item label={item.Gender} value={item.Gender} key={key}/>
            )}
         </Picker>}
        </View>
       );
      }
     }

上面的代码是我的app.js文件。但它什么也没有返回给选择器。请帮助我。谢谢你。

Answer 1

从您的API调用中查看json

{
    "MFBasic": {
        "SkinTones": "DARK,FAIR,VFAIR",
        "Build": "SLIM,ATHLETIC,PLUMPY",
        "Gender": "F,M,T",
        "Genre": "ACTION,COMEDY,DRAMA",
        "Languages": "ENG,HINDI,TAM",
        "MediaModes": "ADS,MOVIES,SHORTFILMS",
        "Tags": "BIKES,HOME,JEWELLARY"
    },
    "Result": "Successfully Loaded MF Basic Details",
    "Code": 100
}

问题在于您试图在需要数组的地方设置字符串。您可以通过执行以下操作来做到这一点：

let genderString = responseJson.MFBasic.Gender;
let genderArray = genderString.split(',');
this.setState({ PickerValueHolder: genderArray });

let responseJson = {
    "MFBasic": {
        "SkinTones": "DARK,FAIR,VFAIR",
        "Build": "SLIM,ATHLETIC,PLUMPY",
        "Gender": "F,M,T",
        "Genre": "ACTION,COMEDY,DRAMA",
        "Languages": "ENG,HINDI,TAM",
        "MediaModes": "ADS,MOVIES,SHORTFILMS",
        "Tags": "BIKES,HOME,JEWELLARY"
    },
    "Result": "Successfully Loaded MF Basic Details",
    "Code": 100
}

let genderString = responseJson.MFBasic.Gender;
let genderArray = genderString.split(',');
console.log(genderArray)

由于数组中的项目只是字符串，因此无法使用无法正常工作的item.Gender来访问它们。您只需要使用item访问它们。

我已经根据您的代码创建了一个示例，并从上方实现了更改并修复了Picker.Item组件，因此现在应进行渲染。您可以在以下小吃https://snack.expo.io/@andypandy/picker-with-array-of-strings

中查看工作代码。

import React from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
    state = {

      PickerValueHolder: [],
      Gender: ''
    }
    componentDidMount () {
      fetch('https://movieworld.sramaswamy.com/GetMFBasicDetails.php', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }

      }).then((response) => response.json())
        .then((responseJson) => {
          let genderString = responseJson.MFBasic.Gender;
          let genderArray = genderString.split(',');
          this.setState({ PickerValueHolder: genderArray });
        }).catch((error) => {
          console.error(error);
        });
    }

    render () {
      console.log(this.state.PickerValueHolder)
      return (

        <View style={styles.container}>
          {<Picker
            selectedValue={this.state.Gender}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({ Gender: itemValue })} >
            { this.state.PickerValueHolder.map((item, key) =>
              <Picker.Item label={item} value={item} key={key}/>
            )}
          </Picker>}
        </View>
      );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8
  }
});

通过从服务器获取本机填充选择器

1 个答案: