Question

自定义renderLoadEarlier无法正常工作。

我有此代码：

LoadMoreButton类：

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import PropTypes from 'prop-types';
import FontAwesome from 'react-native-vector-icons/FontAwesome';

const styles = {
    containerStyle: {
        marginTop: 8,
        marginBottom: 8,
        paddingTop: -2,
        alignItems: 'center',
        justifyContent: 'center',
    },

    textStyle: {
        size: 30,
        color: '#D60000',
    }
}

export default class LoadMoreButton extends React.Component {

    static defaultProps = {
    }

    static propTypes = {
        onPress: PropTypes.func.isRequired,
    }

    renderLoading() {
        if (!this.props.isLoadingEarlier) {
            return <FontAwesome name='angle-double-up' size={styles.textStyle.size} color={styles.textStyle.color}/>
        } else {
            return <FontAwesome name='spinner' size={styles.textStyle.size} color={styles.textStyle.color}/>
        }
    }

    render() {
        console.log('LoadMoreButton => render', this.props.isLoadingEarlier);
        return (
            <View style = {{
                width: '100%',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <TouchableOpacity
                    onPress={() => {
                        if (this.props.onLoadEarlier) {
                            this.props.onLoadEarlier()
                        }
                    }}
                    disabled={this.props.isLoadingEarlier === true}
                    accessibilityTraits='button'
                >
                    <View style = {styles.containerStyle}>
                        {this.renderLoading()}
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

在“聊天”模块中，我有

renderLoadEarlier = (loadEarlierProps) => {
        console.log('renderLoadEarlier', loadEarlierProps.isLoadingEarlier);
        return <LoadMoreButton 
            onLoadEarlier={loadEarlierProps.onLoadEarlier} 
            isLoadingEarlier={loadEarlierProps.isLoadingEarlier} />
    }

    onLoadEarlier = async () => {
        this.setState({
            isLoadingEarlier: true,
        });
        try {
            console.log('onLoadEarlier => loadd more');
            await this.loadEarlierMessage();
            console.log('onLoadEarlier => loadd more done');
        } catch ( error ) {
            Alert.alert('Error!', 'Can not load more message.');
        } finally {
            console.log('onLoadEarlier => loadd more state');
            this.setState({
                isLoadingEarlier: false,
            });
        }
    }


render() {
return (
                <GiftedChat
                    messages={this.state.messages}
                    onSend={this.onSend}

                    renderLoadEarlier = {this.renderLoadEarlier}
                    loadEarlier={true}
                    isLoadingEarlier={this.state.isLoadingEarlier}
                    onLoadEarlier={this.onLoadEarlier}

                    user={{
                        _id: this.props.userId,
                        name: this.props.name,
                        avatar: AuthSv.buildAvatarURL(this.props.fbId)
                    }}

                    renderBubble={this.renderBubble}

                    placeholder="Type your message ..."
                />
            );
...
}

如果我按下“加载更多”按钮，我希望控制台日志的输出必须在最后包含此行：

LoadMoreButton => render true

此行之后：

Chat => render false

但是实际输出不包含它，只是：

onLoadEarlier => loadd more
Chat.js:131
Chat => render true
Chat.js:193
Chat => render true
Chat.js:193
renderLoadEarlier true
Chat.js:120
LoadMoreButton => render true
LoadMoreButton.js:39
renderLoadEarlier true
Chat.js:120
LoadMoreButton => render true
LoadMoreButton.js:39
onLoadEarlier => loadd more done
Chat.js:133
onLoadEarlier => loadd more state
Chat.js:137
Chat => render false
===> missing re-render here <===

一切正常，除了最后一步，在this.state.isLoadingEarlier从true更改为false之后未调用renderLoadEarlier。

有人知道为什么吗？

renderLoadEarlier无法正常工作

0 个答案: