在选择器内显示数据集

Question

我是React Native的新手。我需要从file.js读取一些数据，并在选择器中显示它们。我只需要选择器中的"标题"。这是我的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>

在上面的代码中未定义数据，我不知道如何以这样的方式管理它，以使其正确显示文件内容。您能帮我如何在选择器中显示我的"标题"数据？

Answer 1

您必须根据要显示的数据更改功能。例如您的数据看起来像

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