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

這裏是我的終極版行動的創建者

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

我的渲​​染

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

Answer 1

我發現使用componentDidUpdate如下因素變通方法（其中onValueChange變成handleValueChange）：

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