React Native Picker 不会显示动态加载的选项答案

【问题标题】：React Native Picker won't display dynamically loaded optionsReact Native Picker 不会显示动态加载的选项
【发布时间】：2018-03-24 12:15:55
【问题描述】：

嘿，我正在尝试创建一个 Picker，它显示首先通过 API 从我的后端加载的选项。我想加载一个数组，然后使用这个数组来填充我的选择器选项。问题是 Picker 不会显示任何动态加载的数据，尽管它会显示静态数据。即使数据在选择器渲染后加载，它也应该使用新数据重新渲染，但事实并非如此。

我将这个库用于 Picker 是因为 React Native Picker 在 Android 上存在的问题：https://github.com/sleighdogs/react-native-android-native-picker

（问题：https://github.com/facebook/react-native/issues/15556）

我正在从 API 为我的选择器加载项目，但加载时它们没有出现。当我最初加载它们时它们也不会出现。

这是我加载它们的方式：

var temp_regions= [];
              for( var i in response.data )
              {
                temp_regions.push({ 'value': response.data[i].id.toString(), 'label': response.data[i].province})
              }
this.setState({ region_options: temp_regions } );

结果是 region_options 包含一个元素：

{value: "1", label: "Masr el gedida"}

这是我渲染 Picker 的函数：

renderPicker() {
    if( this.state.region_options.length < 1 )
      {
        console.log('render dummy');
        return <Picker
          prompt = 'Regions'
          selectedValue={this.state.region}
          onValueChange={(itemValue, itemIndex) => this.setState({region: Number(itemValue) })}
          items = {[{value: '0', label: 'Loading'}]}
          >
            <View><Text><Text style={{'fontWeight':'bold'}}>Selected value:</Text> {this.state.region}</Text></View>
        </Picker>
      }
      else
      {
        console.log('render real');
        return <Picker
          prompt = 'Regions'
          selectedValue={this.state.region}
          onValueChange={(itemValue, itemIndex) => this.setState({region: Number(itemValue) })}
          items = {this.state.region_options}
          >
            <View><Text><Text style={{'fontWeight':'bold'}}>Selected value:</Text> {this.state.region}</Text></View>
        </Picker>
      }
  }

选择器永远不会显示 this.state.region_options 的内容，除非它们在运行应用程序之前被静态设置。没有错误出现。 'render dummy' 最初是打印的，这很好，然后当数据加载时，会打印 'render real' 但 Picker 实际上并没有改变它的内容。

【问题讨论】：

你试过this吗？
我看过但没试过。老实说，我不明白这与 Picker 的正常实现之间有什么区别。是 onChange() 吗？还是与 redux-form 有关？

标签： javascript android reactjs react-native picker

【解决方案1】：

试试这个方法

type Props = {};
export default class App extends Component<Props> {
  constructor(Props){
    super(Props);
    this.state={
      selectedRegion:null,
    }
  }

  getItems() {
    var items = [];    
    var region = [{value: "1", label: "Masr el gedida"}];   
    for (i=0;i<region.length;i++) {
      console.log("region : " + JSON.stringify(region))
      items.push(<Picker.Item key ={region[i].value} value={region[i].value} label={region[i].label} />);
    }
    return items;    
  }
  render() {    
    return (
      <View>
        <Picker
          selectedValue={this.state.selectedRegion}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) => this.setState({ selectedRegion: itemValue })}>
          {this.getItems()}
        </Picker>
      </View>
    );
  }

【讨论】：