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）

此外，您正在尝试更新可能存在于组件状态中的render函数内的值。在这个特定的场景中，您正在尝试修改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});}}
/>

无状态组件中状态的替代

1 个答案: