选择器 onValueChange 不会在每个选择上被调用

Question

我有一个带有一些硬编码值的选择器。在值更改时，我想使用我商店中的操作创建器函数使用所选值更新我的 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>

传递给组件以处理值更改的方法。我在这里设置了断点，但它们通常只针对其他所有选择触发。从蓝色开始，然后选择它触发的橙色。然后选择绿色，它不会触发，然后选择红色，它会再次触发。

handleValueChange({prop, value}) {
    this.props.updateSettings({prop, value})
}

这是我的 redux 动作创建器

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

我的渲染方法（onValueChange 变成了 handleValueChange）

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

Answer 1

我使用componentDidUpdate 找到了以下解决方法：

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