时间戳

首页 > 解决方案 > React Native 选择器在值更改后重置

react-native - React Native 选择器在值更改后重置

问题描述

我使用了反应选择器并重置回以前的值。OValueChange 上的 setState 也不起作用

pickerChange(index) {
  this.setState({
     ingred_value: this.props.filterData.ingredients[index].value,
     ingred_id: this.props.filterData.ingredients[index].id
});

<Picker
  mode='dropdown'
  selectedValue={this.state.ingred_value}
  style={{ marginStart: 10 }}
  onValueChange={(itemIndex) => this.pickerChange(itemIndex)}
>

 {
   this.props.filterData.ingredients.map((v) => 
   {
     return <Picker.Item label={v.value} value={v.id} key={v.id} />
   })
 }
</Picker>

标签： react-native

解决方案

您的代码有 2 个潜在问题：

  1. 您selectedValue的组件的属性Picker设置为this.state.ingred_value（其中包含值而不是 id），但value您的组件的属性PickerItem设置为v.id. 这意味着当您更改ingred_value状态值时，Picker 将无法将新状态与 PickerItem 中的 id 值匹配以将其选中selectedValue。你应该ingred_id改用。
  2. 该onValueChange方法的第一个参数是值 (v.id) 而不是所选项目的索引（看这里）。因此，除非您的项目 id 从 0 开始并且是连续的，否则它可能与索引不匹配，在这种情况下，您不会在数组 ( ingredients[index]) 中选择正确的项目，并且如果该项目不存在，则会引发错误。您应该将其更改为onValueChange={(itemValue, itemIndex) => this.pickerChange(itemIndex)}.

下面的代码应该可以工作：

pickerChange(index) {
   this.setState({
     ingred_value: this.state.filterData.ingredients[index].value,
     ingred_id: this.state.filterData.ingredients[index].id
   })
 }

 render() {
   return (
     <Picker
       mode='dropdown'
       selectedValue={this.state.ingred_id}
       style={{ marginStart: 10 }}
       onValueChange={(itemValue, itemIndex) => this.pickerChange(itemIndex)}
     >
     {
       this.state.filterData.ingredients.map((v) => 
       {
         return <Picker.Item label={v.value} value={v.id} key={v.id} />
       })
     }
     </Picker>
   );
 }

推荐阅读