反应useState钩子不更新渲染文本

时间:2020-10-27 18:15:03

标签: react-native react-hooks

我正在使用弯钩来打印会话列表,其中包含联系人的姓名和每条消息的最新消息。

我正在使用间隔检查每个对话,如果最后一条消息已更改。使用API​​可以正常工作,我可以获取内容并使用setState对其进行更改,但是当我尝试在render部分中获取它时,我得到了旧的内容。

这是一些代码:

const _getMessages = () => {
    setDataMsg('');
    if (dataContacts) {
        dataContacts.map((itemValue, itemIndex) => {
            ApiClient.instance.getConversation(itemValue.id).then(response => {
                if (response.status === 200) {
                    setDataMsg([...dataMsg, response.data[response.data.length-1].content]);
                    console.log('getting all messages ', response.data[response.data.length-1].content);
                }
            }).catch(error => {
                console.log(error);
                Alert.alert('Erreur', 'Impossible de récupérer les messages')
            })
        })
    }
    else
        clearInterval(intervalMsg);
    if (props.navigation.state.routeName !== "MessagesPage") {
        clearInterval(intervalMsg);
    }
}



// Affichage du dernier message //
    const _showMessage = (index) => {
        if (dataMsg) {
            return (dataMsg[index]);
        }
        return ('Aucun message');
    }

渲染:

<FlatList
                        style={getStyle().messageList}
                        data={dataContacts}
                        extraData={dataMsg}
                        refreshing={true}
                        keyExtractor={(item) => {
                            return item.id.toString();
                        }}
                        renderItem={({item, index}) => {
                            return (
                                <TouchableOpacity
                                    style={getStyle().card}
                                    onPress={() => {
                                        cardClickEventListener(item)
                                    }}>
                                    <View style={getStyle().cardImage}>
                                        <Image style={getStyle().image}
                                               source={_handleImg(item)}/>
                                    </View>
                                    <View style={getStyle().cardContent}>
                                        <Text
                                            style={[getStyle().name, {fontFamily: props.font}]}>{item.firstName + " " + item.lastName}</Text>
                                        <Text
                                            style={{fontFamily: props.font, fontStyle:'italic'}}>{_showMessage(index)}</Text>
                                    </View>
                                    <View style={getStyle().cardIndicator}>
                                    </View>
                                </TouchableOpacity>
                            )
                        }}/>

0 个答案:

没有答案