ステートレスコンポーネントの状態の代替

Question

enter code hereWheel Pickerコンポーネントをプロジェクトに含めることを試みていました。それはステートフルなコンポーネントでそれをカバーするときにうまくいきます。私はステートレスコンポーネントに変換しようとしました。ホイールをスクロールすると、選択されたインデックスは常にデフォルト値にインデックスされます（例：アイテム番号10にスクロールし、私は正しい値を受け取りますが、デフォルト値0に戻ります）。私のコンポーネントに何か問題がありますか？

import React, {PropTypes} from 'react' 

import { 
    Component, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

import Picker from 'react-native-wheel-picker' 
var PickerItem = Picker.Item; 
const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: 'transparent', 
    }, 

}); 

const WheelTimePicker = ({selectedItems, receiveTime}) => { 
    const _renderPikcer =() => { 
     firstData = { 
      secondList: [], 
      minuteList: [], 
     }; 
    for (var i = 0; i < 60; i++) { 
      firstData.secondList.push(i + 'sec'); 
      firstData.minuteList.push(i + 'min'); 
     } 

     return (
      <View> 
      <Picker style={{ left: -70, width: 60, height: 60 }} 
       selectedValue={selectedItems.selectedMin} 
       itemStyle={{ color: "white", fontSize: 20 }} 
       onValueChange={(index) => { selectedItems.selectedMin = index;receiveTime(selectedItems); }}> 
       {firstData.minuteList.map((value, i) => (
        <PickerItem label={value} value={i} key={"money" + value} /> 
       ))} 
      </Picker> 
      <Picker style={{ left: 60, width: 60, height: 70 }} 
       selectedValue={selectedItems.selectedSec} 
       itemStyle={{ color: "white", fontSize: 20 }} 
       onValueChange={(index) => { selectedItems.selectedSec = index; receiveTime(selectedItems) }}> 
       {firstData.secondList.map((value, i) => (
        <PickerItem label={value} value={i} key={"money" + value} /> 
       ))} 
      </Picker> 
      </View> 
     ); 
    } 

    return (

     <View style={styles.container}> 
    {_renderPikcer()} 

     </View> 
    ); 

}; 

WheelTimePicker.propTypes = { 
    selectedItems: PropTypes.object.isRequired, 
    receiveTime: PropTypes.func.isRequired, 
}; 
export default WheelTimePicker; 

私はこのようなコンポーネントを置く：

<WheelTimePicker selectedItems={{selectedMin: 2, selectedSec: 0}} receiveTime={(rc)=> _displayTime(rc)}/> 

Answer 1

を使用すると、親要素から渡され取得されpropsを変更しようとしているためです。私。ステートレスコンポーネントで渡されたパラメータは小道具です。小道具は読み取り専用です（https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only）

また、コンポーネントの状態に潜在的に存在する可能性があるレンダー機能内の値を更新しようとしています。この特定のシナリオでは、コンポーネントに渡されている小道具であるselectedItemsの内容を変更しようとしています。

selectedItemsのコンテンツを更新するには、selectedItemsを親コンポーネントの状態として保持し、値を更新するためにsetStateを使用することをお勧めします（これはおそらく元のアプローチです。例

class ParentComponent extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedItems: { 
     selectedMin: 2, 
     selectedSec: 0 
     } 
    } 
    } 

    _updateSelectedItems(rc) { 
    this.setState({ 
     selectedItems: { 
     selectedMin: rc.selectedMin || this.state.selectedMin, 
     selectedSec: rc.selectedSec || this.state.selectedSec 
     } 
    }) 
    } 

    render() { 
    return (
     <WheelTimePicker selectedItems={this.state.selectedItems} receiveTime={(rc) => this._updateSelectedItems(rc)}/> 
    ) 
    } 
} 

この方法についてステートフルコンポーネント」）

でそれをカバーし、あなたのWheelTimePickerコンポーネントはステートレスすることができます。コンポーネントが小道具ではなく、状態によって値が表示されますので、あなたは、あなたのアプリにReduxの統合をご覧ください

<Picker 
    ... 
    onValueChange={(index) => { receiveTime({selectedMin:index});}} 
/>