无状态组件中的状态替代

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。 IE。在无状态组件中，传入的参数是 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 组件可以是无状态的。在您的Picker 中，可能需要稍微调整一下：

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