问题描述

我正在使用 FlatList 创建动态组件，在动态组件中，我有一个下拉字段，我正在为此使用 Picker。选择器正在正确呈现，但未显示所选值。

这是我的代码。

export default class DashBoard extends Component {
  constructor() {
    super()
    this.state = {
      datasource: AllProduct,
      isLoading:false,
      page:1,    
    }
    this.selectvaluechange=this.selectvaluechange.bind(this);
  } //constructor



quantitychange=(index,text)=>{
    var obj={...this.state.datasource};    
    console.log(text);
    console.log((obj))
    console.log('i am in quantitychange')
    obj[index].Qty=text;   
  this.setState([obj])
  console.log('after quantity change '+this.state.datasource)
  }


  packageList = (index) =>{
    return( this.state.datasource[index].pack.map( (x) => { 
           console.log(x.Weight) 
           console.log(x.packId)
          return( <Picker.Item label={x.Weight} key={x.packId}  value={x.packId}  />)} ));
}

selectvaluechange=(index,itemvalue,itemindex)=>{
  console.log('index is '+index);
  console.log('itemvalue is '+itemvalue);
  console.log('itemindex is '+itemindex);
  var obj={...this.state.datasource}
  console.log(obj);
  var selprice = obj[index].pack[itemindex].Price;
  console.log('sel price '+selprice);
  console.log('Qty '+obj[index].Qty);
  var selAmount =selprice*obj[index].Qty;
  console.log('sal amout '+selAmount);
  obj[index].packselectedValue=itemvalue;
  console.log('sal amout 1'+JSON.stringify(obj[index]));
  console.log('total object is '+JSON.stringify(obj));
  this.setState([obj])
  console.log('total object is '+JSON.stringify(obj));

}



 renderItem = ({ item,index }) => {
    console.log(this.state);
    return (
      <View style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }}>
        <Image style={{ width: 100, height: 100, margin: 5 }}
          source={require('../../../assets//wheat.jpg')} />
        <View style={{ alignContent: 'center' }}>
          <Text style={{ fontSize: 18, color: 'black', fontWeight: 'bold' }}>{item.Heading}</Text>
          <Text style={{ fontSize: 10, color: 'black' }}>{item.Details}</Text>
          <View style={{ flex: 1, flexDirection: 'row', padding: 10 }}>
            <Text style={{ width: 40, height: 30, paddingTop: 5, paddingLeft: 5, }}>Qty :</Text>
            <NumericInput
              totalHeight={30}
              totalWidth={80}
              value={this.state.datasource[index].Qty}
              onChange={(value) => this.quantitychange(index, value)}/>
              {/* <Text>
                {this.state.datasource[index].pack[
                  this.state.datasource[index].packselectedValue].Weight}                
              </Text> */}             
             <Picker
              style={{ marginLeft: 60, width: 40, height: 30 }}              
              selectedValue={this.state.datasource[index].pack[this.state.datasource[index].packselectedValue].packId}               
              onValueChange={(itemValue, itemIndex) => this.selectvaluechange(index, itemValue, itemIndex)}>              
              {this.packageList(index)}
            </Picker> 
          </View>
          {/* <Switch
          style={{marginTop:30}}
          onValueChange = {(value)=>this.taggleSwitch(value,index)}
          value = {this.state.datasource[index].isselected}/> */}
        </View>
      </View>
    )
  }



renderSeperator=()=>{
    return(
      <View style={{height:1,width:'100%',backgroundColor:'black'}}/>
    )
  }





    render() {

        return (
          this.state.isLoading ? <
            View style={{ flex: 1, justifyContent: 'center', alignContent: 'center' }}>
            <ActivityIndicator size='large' color='#330066' animating />
          </View> :
            <View style={styles.container}>
              <FlatList
extraData={this.state.datasource}
                data={this.state.datasource}
                renderItem={(item,index)=>this.renderItem(item,index)}
                keyExtractor={(item, index) => item.Id}
                ItemSeparatorComponent={this.renderSeperator}
              />
             </View>
        )
      }
    }
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF'
  }
})

Json 数据源为：

[{"Id":"1","Heading":"Ashirvad","Details": "ashirvad Atta - Whole Wheet 10k Pouch",
                    "Qty": 0,
                "pack": [{"packId":1,"Weight": "1kg","Price": 25},
                        {"packId":2,"Weight": "2kg","Price": 50}, 
                        {"packId":3,"Weight": "5kg","Price": 125},
                        {"packId":4,"Weight": "10kg","Price": 250}],"packselectedValue":0,"isselected": false},
{"Id":"2","Heading": "Tata Salt","Details": "Tata Salt Iodised Salt 1kg Product","Qty": 0,
"pack": [{"packId":1,"Weight": "1kg","Price": 9.5},{"packId":2,"Weight": "2kg","Price": 19}, {"packId":3,"Weight": "5kg","Price": 47    },
        {"packId":4,"Weight": "10kg","Price": 92}],"packselectedValue":0,"isselected": false},
{"Id":"3","Heading": "Sambar Powder",
"Details": "Sambar Powder 100gm packet","Qty": 0,
"pack": [{"packId":1,"Weight": "25gm",  "Price": 13},{"packId":2,"Weight": "50gm",  "Price": 25.5}, {"packId":3,"Weight": "100gm","Price": 50},
         {"packId":4,"Weight": "200gm","Price": 99}],"packselectedValue":0,"isselected": false}];

版本信息

react-native info
info Fetching system and libraries information...
System:
    OS: Windows 8
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 1.05 GB / 7.94 GB
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  SDKs:
    Android SDK:
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: Version  3.4.0.0 AI-183.6156.11.34.5692245

在调试模式下选择下拉菜单时，我可以看到值已正确打印在控制台中。我删除了动态组件并替换了选择器中的以下代码

<Picker style={styles.pickerStyle}  
                        selectedValue={this.state.language}  
                        onValueChange={(itemValue, itemPosition) =>  
                            this.setState({language: itemValue, choosenIndex: itemPosition})}  
                    >  
                    <Picker.Item label="Java" value="java" />  
                    <Picker.Item label="JavaScript" value="js" />  
                    <Picker.Item label="React Native" value="rn" />  
                </Picker>

并添加了状态语言和选择索引，但它仍然没有显示选定值列......我在这里做错了什么请帮助......

标签： react-native-android

react-native-android - 用动态组件反应原生选择器不显示所选值

问题描述

Json 数据源为：

版本信息

解决方案

推荐阅读