无状态组件中的状态替代

Question

enter code here我试图将Wheel 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 。 即在无状态组件中，传入的参数是props。 道具是只读的（ https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only ）

另外，您正在尝试更新渲染函数中的值，这些值可能存在于组件状态中。 在这种特定情况下，您尝试修改selectedItems的内容， 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组件可以是无状态的。 在您的Picker ，可能需要对其进行一些调整，例如：

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