React native 在选择器下拉列表中选择名称时，如何设置状态id？

我有一个json数组，格式如下

  this.state = {
    allTeachers: [
        {
            "id": "qKUd5GoBwpolnxM4upjo",
            "name": "XYZ",
            "subject": "Science"
        },
        {
            "id": "qaUe5GoBwkrtnxM4kOip",
            "name": "Vidya",
            "subject": "Mathematics"
        }
    ]
  }

我使用下面的代码作为下拉列表。现在我可以设置名称，但我想在下拉列表中显示名称，并设置所选名称的相应id。我正在使用本地选择器。我该怎么做

<View style ={styles.dropdownInput}>
{
    <Picker
        selectedValue={this.state.teacher_name}
        style={styles.pickerCss}
        onValueChange={(itemValue, itemIndex) => this.setState({teacher_name: itemValue})}
    >
    <Picker.Item label='Select Teacher' value='0' />
    {
        this.state.allteachers ?
            this.state.allteachers.map((item,key) => (
                <Picker.Item label={item.name} value={item.name} />
            ))
        :
        false
    }
    </Picker>
}
</View>

{
this.setState（{teacher\u name:itemValue}）
>
{
这个州所有的老师？
this.state.allteachers.map（（项，键）=>(
))
:
假的
}
}

只需将PickerItem的值设置为相应的id即可。 这意味着改变：

<Picker.Item label={item.name} value={item.name} />

将

teacher\u id

存储在

teacher\u name

状态变量中。您可以在构造函数中创建一个名为

teacher\u id

的新状态变量，并将id存储在那里

此外我建议进行一次小型重构。 而不是：

{
    // btw here is a typo your array is called allTeachers
    this.state.allteachers ?
        this.state.allteachers.map((item,key) => (
            <Picker.Item label={item.name} value={item.name} />
        ))
    :
    false
}

{
//顺便说一句，这里有一个输入错误，你的数组被称为allTeachers
这个州所有的老师？
this.state.allteachers.map（（项，键）=>(
))
:
假的
}

我将创建一个renderPickterItems函数：

renderPickerItems(allTeachers){
    if (allTeachers) {
       return(
        allTeachers.map((item,key) => (
        <Picker.Item label={item.name} value={item.id} />
        ))
    );
    }   
  }

renderPickerItems（所有教师）{
if（所有教师）{
返回(
allTeachers.map（（项目，键）=>(
))
);
}   
}

您可以通过以下方式拨打：

 <Picker.Item label='Select Teacher' value='0' />
    {this.renderPickerItems(this.state.allTeachers)}
 </Picker>

{this.renderPickerItems（this.state.allTeachers）}

完整的工作示例：

renderPickerItems(allTeachers){
    if (allTeachers) {
       return(
        allTeachers.map((item,key) => (
        <Picker.Item label={item.name} value={item.id} />
        ))
    );
    }   
  }

 <Picker.Item label='Select Teacher' value='0' />
    {this.renderPickerItems(this.state.allTeachers)}
 </Picker>