React native 未对每个选择调用选择器onValueChange

我有一个带有一些硬编码值的选择器。在值更改时，我希望使用我的应用商店中的action creator函数使用所选值更新我的redux应用商店。但是，我遇到了一个问题，即onValueChange侦听器似乎不会为每个选择更改调用

选择器代码

<Picker selectedValue={this.props.settings.colorScheme} 
  onValueChange={(value, itemIndex) => this.props.onValueChange({prop: 'colorScheme', value})}>
  <Picker.Item value="blue" label="Blue"/>
  <Picker.Item value="green" label="Green"/>
  <Picker.Item value="orange" label="Orange"/>
  <Picker.Item value="purple" label="Purple"/>
  <Picker.Item value="red" label="Red"/>
</Picker>

这是我的redux操作创建者

export function updateSettings ({prop, value}) {
  return {
    type: UPDATE_SETTINGS,
    payload: ({ prop, value }),
  }
}

我的渲染方法（其中onValueChange变为handleValueChange）

render（）{
返回(
)
}

我使用

componentdiddupdate

找到了以下解决方法：

export default class PickerComponent extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {value:this.props.eventId}
  }

  componentDidUpdate () {
    if (this.props.eventId !== this.state.value) {
      this.props.chooseEvent(this.state.value)
    }
  }

  onValueChange = value => {
    if (value) this.setState({value})
  }

  makePickerItem (label, key) {
    const props = {label, key, value:key}
    return <Picker.Item {...props} />
  }

  makePickerItems = function * () {
    for (let id in this.props.things) {
      yield this.makePickerItem(this.props.things[id].name, eventId)
    }
  }

  render () {
    return (
      <Picker
        selectedValue={this.state.value}
        onValueChange={this.onValueChange}
      >
        {[...this.makePickerItems()]}
      </Picker>
    )
  }
}

导出默认类PickerComponent扩展PureComponent{
建造师（道具）{
超级（道具）
this.state={value:this.props.eventId}
}
组件更新（）{
if（this.props.eventId！==this.state.value）{
this.props.chooseEvent（this.state.value）
}
}
onValueChange=value=>{
if（value）this.setState（{value}）
}
makePickerItem（标签、键）{
const props={label，key，value:key}
返回
}
makePickerItems=函数*（）{
for（让id输入这个.props.things）{
生成this.makePickerItem（this.props.things[id].name，eventId）
}
}
渲染（）{
返回(
{[…this.makePickerItems（）]}
)
}
}

FYI它目前仍然是选择器组件中的一个问题。今天，有人提出了一个更简单的解决方案，可能对更新您在github相关问题上的答案很感兴趣（我看到您在那里发表了评论）：在我的例子中，父函数传递给我的函数没有调用

onValueChange

。这就是为什么我用这种方式来解决这个问题。但是谢谢你的链接，它可能对其他人有用。

render() {
  return (
    <Settings
    settings={this.props.settings}
    onValueChange={this.handleValueChange.bind(this)}
    />
  )
}

export default class PickerComponent extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {value:this.props.eventId}
  }

  componentDidUpdate () {
    if (this.props.eventId !== this.state.value) {
      this.props.chooseEvent(this.state.value)
    }
  }

  onValueChange = value => {
    if (value) this.setState({value})
  }

  makePickerItem (label, key) {
    const props = {label, key, value:key}
    return <Picker.Item {...props} />
  }

  makePickerItems = function * () {
    for (let id in this.props.things) {
      yield this.makePickerItem(this.props.things[id].name, eventId)
    }
  }

  render () {
    return (
      <Picker
        selectedValue={this.state.value}
        onValueChange={this.onValueChange}
      >
        {[...this.makePickerItems()]}
      </Picker>
    )
  }
}