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

每次选择都没有调用选择器onValueChange

1 个答案: