Question

实际上我正在开发Sample appilication，我想在反应原生菜单选项中使用map函数显示名称列表：

首先我声明了一个数组：

接下来我在render（）中编写了map函数，并在菜单上下文Component中的return（）中使用了该组件。

    var ListNames = [{"pname":"Smith"},{"pname":"Jhon"},{"pname":"Steve"},{"pname":"Ferr"},{"pname":"Kevin"}];

    render(){

      ListNames.map((ele, i)=>{
                         <Text>{ele.pname}</Text>           
      })

    return(
     <MenuContext style={{height:50,marginTop:20}} ref="MenuContext">
                    <Menu style={styles.dropdown} onSelect={(value) => this.setState({ dropdownSelection: value })}>
                     <MenuTrigger style={{flex:1,flexDirection:'row'}}> 
                     <View style={{flex:.7}}>
                       <Text style={{color:'black',fontSize:15}}>{this.state.dropdownSelection}</Text> 
                       </View>

                       <View style={{flex:.3,alignItems:'flex-end'}}>           
                       <Image source = {require('./../images/dropdown.png')} style={{height:15,width:20,marginTop:3}}/>
                      </View>
                      </MenuTrigger>
                     <MenuOptions optionsContainerStyle={styles.dropdownOptions1}
                                  renderOptionsContainer={(options) => <ScrollView><Text>SELECT....</Text>{options}</ScrollView>}>


                       <MenuOption value={ListNames}>
                         **{ListNames}**
                       </MenuOption>


                      {/* <MenuOption value="Kevin">
                         <Text>Kevin</Text>
                       </MenuOption>
                       <MenuOption value="Pieterson">
                         <Text>Pieterson</Text>
                       </MenuOption>
                       <MenuOption value="David">
                         <Text>David</Text>
                       </MenuOption>
                       <MenuOption value="Meissi">
                         <Text>Meissi</Text>
                       </MenuOption> */}
                     </MenuOptions>
                   </Menu>
                  </MenuContext>)
}

所以我想在react native菜单选项模块中使用Mapping Function它是使用map函数显示名称

任何人请建议

Answer 1

最后我解决了这个问题，我非常愚蠢地思考，只是在复习方法中

<MenuOption value={ListNames>
                                     {ListNames}
                                   </MenuOption>

替换为下面的

 {
                      this.state.ListNames.map((ele, i)=>{
                        return <MenuOption value={ele.playerName}>
                                 <Text>{ele.playerName}</Text>
                               </MenuOption>           
                      })
                    }

React-Native：对象作为React子对象无效（找到：具有键{pname}的对象）

1 个答案: