Question

嘿，我正在尝试创建一个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>
      }
  }

Picker永远不会显示this.state.region_options的内容，除非在运行应用程序之前静态设置它们。没有错误出现。＆＃39;渲染虚拟＆＃39;最初是打印的，这很好，然后当数据加载时，“真实”＃打印但是Picker实际上没有改变它的内容。

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

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

1 个答案: