Question

我在使用react-native-swipeable组件时遇到了问题，通常它工作正常，但似乎如果我尝试在无状态功能组件中使用它，它就会停止正常工作。我想知道这是否是我的代码的问题？

这两种方案都是从父组件调用的，如下所示：

render() {
    const {currentlyOpenSwipeable} = this.state;
    const itemProps = {
        onOpen: (event, gestureState, swipeable) => {
            if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
                currentlyOpenSwipeable.recenter();
            }

            this.setState({currentlyOpenSwipeable: swipeable});
        },
        onClose: () => this.setState({currentlyOpenSwipeable: null})
    };
        return (
            <View style={{flex: 1}}>
                <FlatList
                    data={this.state.data}
                    renderItem={({item}) => (
                       <ListItem
                           {...itemProps}
                           item = {item}/>
                    )}
                    extraData={this.state}
                    keyExtractor={item => item.docId}/>
            </View>
       )
  }

基本上，如果我在渲染函数中直接使用这个组件，它的效果很好：

class ListItem extends React.PureComponent {
    constructor(props){
        super(props)

        this.swipeable = null
    }
    render(){
        return(
            <View>
                <Swipeable onRef={ref => this.swipeable = ref}
                    rightButtons={[
                        <TouchableOpacity style={{backgroundColor: 'red'}}>
                            <Icon name="delete" size={24} color={'white'}/>
                        </TouchableOpacity>
                    ]}
                    onRightButtonsOpenRelease={this.props.onOpen}
                    onRightButtonsCloseRelease={this.props.onClose}>
                        <View>
                            <Text> Test </Text>
                        </View>
                </Swipeable>
            </View>
        )
    }
}

如果我尝试从功能组件中渲染它，它仍会滑动但会立即关闭，从而无法使用。

class ListItem extends React.PureComponent {
    constructor(props){
        super(props)

        this.swipeable = null
    }
    render(){
        const RenderSwipeRow = () => {
             return(
                <View>
                    <Swipeable onRef={ref => this.swipeable = ref}
                        rightButtons={[
                            <TouchableOpacity style={{backgroundColor: 'red'}}>
                                <Icon name="delete" size={24} color={'white'}/>
                            </TouchableOpacity>
                        ]}
                        onRightButtonsOpenRelease={this.props.onOpen}
                        onRightButtonsCloseRelease={this.props.onClose}>
                            <View>
                                <Text> Test </Text>
                            </View>
                    </Swipeable>
                </View>
            )
        }

        return(
            <View style={{flex: 1}}>
                <RenderSwipeRow/>
            </View>
        )
    }
}

我不知道这里有什么区别。我在想，不知何故我没有将所有必需的道具传递给组件，但似乎并非如此。

如果在父级别上记录this.state.currentlyOpenSwipeable呈现，则表明当滑动正常工作时，存在lastOffset值和rightButtonsOpen = true

当滑动不起作用时（从功能组件渲染时），这些字段看起来未设置或不正确：

因此，this.state.currentlyOpenSwipeable的更新值可能未设置？

感谢您的帮助！

Answer 1

你的问题是你说它是一个无状态的功能组件但是试图在你的渲染中设置然后使用组件状态这是一个坏主意。如果你想让它保持无状态，你应该找到一种方法将这些数据作为道具传递，或者让状态在渲染之外进行管理。

渲染功能应始终保持纯净，您应该收到控制台警告。

组件在功能组件内部无法正常工作

1 个答案: