react-native - React useState 钩子不更新渲染文本

Question

我正在使用挂钩来打印对话列表，其中包含联系人的姓名和每个对话的最后一条消息。

如果最后一条消息已更改，我正在使用间隔来检查每个对话。它正在使用 API 查找，我获取内容并使用 setState 更改它，但是当我尝试在渲染部分获取它时，我得到了旧的。

这是一些代码：

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>
                            )
                        }}/>

标签： react-nativereact-hooks