通过从服务器获取来填充选择器以响应本机

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