无状态组件中的状态替代

Question

enter code here I was trying to include the Wheel Picker component to my project. It works well when cover it in the stateful component.So I tried convert it to stateless component, when I scroll the wheel, the selected Index always index to default value( Ex: when I scroll to item number 10, and the wheel auto scroll back to default 0) although I receive the correct values. Is there something wrong with my component?

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;

I put the component like this:

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

Answer 1

This is because you are trying to modify props that is getting passed down from the parent element. Ie in a stateless component, the parameter passed in is the props. Props are read only ( https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only )

Also you are trying to update values inside render function that can potentially live in the state of the component. In this particular scenario, you are trying to modify the content of selectedItems which is a props that is getting passed down to your component.

In order to update the content of selectedItems , it would be better to keep selectedItems as the state in the parent component and use setState to update the values (this is probably your original approach, since you mentioned "It works well when cover it in the stateful component")

For example

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

This way, your WheelTimePicker component can be stateless. And in your Picker , probably would need to adjust it a little to something like:

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