在选择器中显示数据集

debugcn 发表于 Dev

雷萨

我是 React Native 的新手。我需要从 file.js 中读取一些数据并在 Picker 中显示它们。我只需要选择器中的“标题”。这是我的 file.js：

export const mydata = [
       {
       "id": 1,
       "Title": "Shiraz"
       "prop": [
                  {
                    "id": 1,
                    "Title": "Test1",
                  }
               ]
       },
];

我的选择器代码如下：

import {mydata} from "./myfile.js";

                         <Picker
                             style={{flex:1}}
                             data={mydata}
                             mode="dropdown"
                             selectedValue={this.state.PickerValueHolder}
                             onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} >
                             {
                               data.map((item, index) => {
                               return (<Item label={item} value={index} key={index}/>) 
                                  }
                                )
                              }
                        </Picker>

在上面的代码中，数据没有定义，我不知道如何以这种方式管理它，它正确地显示了文件内容。你能帮我如何在选择器中显示我的“标题”数据吗？

蒂姆

您必须根据要显示的数据更改函数。例如你的数据看起来像那样

export const mydata = [
   {
   "id": 1, // will be shown as value
   "Title": "Shiraz" // will be shown as your label 
   "prop": [
              {
                "id": 1,
                "Title": "Test1",
              }
           ]
   },
   "id": 2, // will be shown as value
   "Title": "Shiraz2" // will be shown as your label 
   "prop": [
              {
                "id": 1,
                "Title": "Test1",
              }
           ]
   },
   ];

然后您需要将您的组件更改为：

    <Picker
    >
       {this.renderPickerItems(mydata)}
   </Picker>

我建议创建一个新函数来呈现项目：

renderPickerItems(data) {
    const elements = data.map((val, index) => {
        return <Picker.Item key={index} label={val.Title} value={val.id} /> 
    });
    return elements; 
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。