Настройка 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 <===
Все работает отлично, за исключением того, что на последнем шаге renderLoadEarlier не был вызван после того, как this.state.isLoadingEarlier был изменен с true на false.
Кто-то знает почему?