我试图将Json数据获取到我的选择器列表中，但在React Native中不起作用

Question

    <--it shows data.source error-->

import React, { Component } from "react";
    import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from "react-native";
    export default class Project extends Component {
     constructor(props)
     {
      super(props);
      this.state = {
      isLoading: true,
      PickerValueHolder : ""
     }; }
    componentDidMount() {
          return fetch("https://facebook.github.io/react-native/movies.json")
            .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>`help needed`
         );
       }
       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.title} value={item.title} 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 1

import React, { Component } from "react";
import { ListView, Text, StyleSheet, View, ActivityIndicator, Button, Alert} from "react-native";

export default class Project extends Component {

    constructor(props)
    {
        super(props);
        this.state = {
            isLoading: true,
            PickerValueHolder : "",
            language: ''
        };
    }

    GetPickerSelectedItemValue(value: string) {
        Alert.alert(value);
        this.setState({
            selected: value
        });
    }

    GetItem (title) {
        Alert.alert(title);
    }

    componentDidMount() {
        return fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {
                let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
                this.setState({
                    isLoading: false,
                    dataSource: ds.cloneWithRows(responseJson['movies']),

                }, function() {
                    // In this block you can do something with new state.
                });

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

    ListViewItemSeparator = () => {
        return (
            <View
                style={{
                    height: .5,
                    width: "100%",
                    backgroundColor: "#000",
                }}
            />
        );
    }

    render() {

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

        return (

            <View style={styles.MainContainer}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderSeparator= {this.ListViewItemSeparator}
                    renderRow={(rowData) =>
                        <View style={{flex:1, flexDirection: 'row'}}>
                            <Text onPress={this.GetItem.bind(this, rowData.title)} style={styles.textViewContainer} >{rowData.title}</Text>
                        </View>
                    }
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({

        MainContainer :{
            justifyContent: "center",
            flex:1,
            margin: 10
        }
    });