Alternative des Zustands in zustandslosen Komponente

Question

enter code here Ich habe versucht, die Wheel Picker Komponente zu meinem Projekt hinzuzufügen. Es funktioniert gut, wenn es in der zustandsbehafteten Komponente bedeckt.So versuchte ich, es in zustandslose Komponente zu konvertieren, wenn ich das Rad blättern, indexiert den ausgewählten Index immer auf den Standardwert (Bsp .: wenn ich zu Element Nummer 10 blättern, und das Rad automatisch blättern zurück auf Standard 0), obwohl ich die richtigen Werte erhalte. Stimmt etwas nicht mit meiner Komponente?

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; 

Ich habe die Komponente wie folgt aus:

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

Answer 1

Dies liegt daran, Sie versuchen, props zu ändern, die vom übergeordneten Element weitergegeben wird immer. I.e. In einer zustandslosen Komponente ist der übergebene Parameter die Requisiten. Requisiten sind nur lesbar (https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only)

Sie versuchen auch, Werte innerhalb der Renderfunktion zu aktualisieren, die möglicherweise im Zustand der Komponente leben können. In diesem speziellen Szenario versuchen Sie, den Inhalt von selectedItems zu ändern, was eine Requisite ist, die an Ihre Komponente weitergegeben wird.

Um den Inhalt von selectedItems zu aktualisieren, wäre es besser, selectedItems wie der Zustand in der übergeordneten Komponente zu halten und verwenden setState die Werte zu aktualisieren (dies ist wahrscheinlich die ursprüngliche Ansatz, da Sie erwähnten „Es funktioniert gut, wenn bedecken sie es in der Stateful-Komponente ")

Zum Beispiel

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

auf diese Weise Ihre WheelTimePicker Komponente kann staatenlos sein. Und in Ihrem Picker, wahrscheinlich müßte es ein wenig so etwas wie anzupassen:

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