將Picker綁定到React Native中的Picker.Item列表

Question

我確定有一種方法可以做到這一點，但我現在看不到。

我想要做的是添加一個Picker組件，但不是對項目列表進行硬編碼，而是從服務中獲取並將Picker綁定到稍後可以填充的內容。

這是我的，但我的應用程序現在甚至不會運行。請有任何想法嗎？

'use strict'; 
var React = require('react-native'); 
var { 
    Picker, 
    Text, 
    View 
} = React; 

var AvailableServices = React.createClass({ 
    getInitialState() { 
     var fetchServicesUri = 'http://some.url/available_services'; 
     fetch(fetchServicesUri) 
      .then((response) => response.json()) 
      .then((responseJson) => { 
       console.log(responseJson); 
       var services = []; 
       for(var service in responseJson.services) { 
        services.push(<Picker.Item label={service.Label} value={service.Value}/>); 
       } 
       this.setState({ 
        services: services 
       }); 
      }) 
      .catch((error) => { 
       console.warn(error); 
      }) 
      .done(); 
     return { 
      services: [], 
      selectedService: null 
     } 
    }, 

    render() { 
     return (
      <View> 
       <Text>Pick a service</Text> 
       <Picker 
        selectedValue={this.state.selectedService} 
        onValueChange={(service) => this.setState({selectedService:service})} 
       > 
        {this.state.services} 
       </Picker> 
      </View> 
     ); 
    } 
}); 

module.exports = AvailableServices; 

Answer 1

你或許應該設置你的初始狀態爲空數組，然後調用您的componentWillMount或componentDidMount服務。我已經設置了一些與虛擬數據here一起工作的東西，並粘貼下面的代碼。

'use strict'; 
var React = require('react-native'); 
var { 
    Picker, 
    Text, 
    View, 
     AppRegistry 
} = React; 

var PickerItem = Picker.Item; 

var SampleApp = React.createClass({ 
    getInitialState() { 
     return { 
      services: ['a', 'b', 'c', 'd', 'e'], 
      selectedService: 'a' 
     } 
    }, 

    componentDidMount() { 
     setTimeout(() => { 
     this.setState({ 
      services: [ 'one', 'two', 'three', 'four', 'five' ] 
     }) 
     }, 3000) 
    }, 

    render() { 
     let serviceItems = this.state.services.map((s, i) => { 
      return <Picker.Item key={i} value={s} label={s} /> 
     }); 

     return (
      <View> 
       <Text>Pick a service</Text> 
       <Picker 
        selectedValue={this.state.selectedService} 
        onValueChange={ (service) => (this.setState({selectedService:service})) } > 

        {serviceItems} 

       </Picker> 
      </View> 
     ); 
    } 
}); 


AppRegistry.registerComponent('SampleApp',() => SampleApp);