Nativebase 选择器项目未显示选定值答案

【问题标题】：Nativebase Picker Item not showing Selected valueNativebase 选择器项目未显示选定值
【发布时间】：2019-02-25 14:51:00
【问题描述】：

我正在尝试从选择器项目中选择项目。问题是当我点击项目然后在函数处理程序onValueChangeJob(value) 上执行一些任务时

onValueChangeJob(value) {
    this.setState({ jobValue: value.jobTitle})
       USE value.number form another task
    });
}

下面是我的选择器组件

<Picker
 style={commonStyle.pickerStyle}
 textStyle={commonStyle.textStylePicker}
 headerTitleStyle={commonStyle.headerTitleStyle}
 headerBackButtonTextStyle={commonStyle.headerBackButtonTextStyle}
 iosIcon={<Icon name="ios-arrow-down" />}
 mode="dropdown"
 placeholder="MAKE A SELECTION"
 placeholderStyle={commonStyle.placeholderStyle}
 note={false}
 itemTextStyle={commonStyle.itemTextStyle}
 selectedValue={this.state.jobValue}
 onValueChange={this.onValueChangeJob.bind(this)}
 >
 {jobItems}                                    
</Picker>

虽然来自地图的工作项在 render() 函数中创建，如

jobItems = this.state.jobTypesList.map((v,i) => {
    return <Picker.Item key={i} value={v} label={v.jobTitle} />
});

所以在这里，如果我直接在 picker.item props value-{v.jobTitle} 中使用，然后选择值更改，但我想在 onValueChangeJob(value) 函数中使用整个对象 v。一件主要的事情状态更新，但无法显示选择器的选定值 尝试了很多不同的事情，但没有发生我想要的事情。我应该如何用适当的例子来处理这个问题，因为我是 React Native 的新手。

看看我的选择器在这张图片中的样子

【问题讨论】：

您将jobValue（对象）设置为jobTitle（可能是字符串），然后从Picker selectedValue 访问它，它需要一个对象，而不是字符串。 onValueChangeJob() 中的this.setState({ jobValue: value}) 怎么样？
感谢您的回复我知道我设置了对象但是 this.setState({ jobValue: value.jobTitle }) 但为什么这不能工作？表示已更新 jobValue 的工作状态值，但无法在 selectedValue={this.state.jobValue} Picker 上显示。
Picker 项目是 JobTypes。你告诉选择器选择一个 JobTitle，它不在它的 JobTypes 数组中，那么它怎么知道它指的是哪个项目呢？
Jobtitle 存在于 JobTypeList ....

标签： react-native native-base

【解决方案1】：

在对一个解决方案进行大量谷歌搜索后，我发现我必须在 onValueChange 处理程序上过滤 this.state.jobTypesList 这个数组并获取特定职位标题的对象

return this.state.jobTypesList.map((v,i) => {
            return <Picker.Item key={i} value={v.jobTitle} label={v.jobTitle} 
        });

let filterArray = this.state.jobTypesList.filter((v) => v.jobTitle === value)[0]
filterArray.jobTitle
filterArray.jobNumber

【讨论】：

【解决方案2】：

如果您使用yup 架构和验证，则可以在 selectedValue 属性中使用 getValues()。

我解决了

<Picker
      selectedValue = {getValues('storeId')}
      onValueChange={itemValue =>
           setValue('storeId', itemValue, true)
      }>
  .../>

【讨论】：