在多通道聊天应用程序中，如何显示仅与特定聊天通道相关的消息?

Question

环境 ： expo 36.0.0/React Native 0.61/react-native-gifted-chat 0.13.0/Firebase 7.6.0

我的目标：在天才聊天 UI 上仅呈现特定于特定聊天频道的消息。

预期结果： 只有与给定频道相关的消息才应显示在天才聊天 UI 上。

实际结果 ：

1. 当我从一个聊天频道导航到另一个聊天频道时，总消息会累积。
2. 当我回到较早的频道时，同一聊天频道的消息会重复不止一次。
3. 警告：遇到两个孩子使用相同的钥匙，%s。键应该是唯一的，以便组件在更新之间保持其标识。非唯一键可能会导致子项重复和/或省略 — 该行为不受支持，在将来的版本中可能会更改。

到目前为止，我尝试了什么？ 1. 每次用户使用 componentDidUpdate 从一个频道导航到另一个频道时，重新启动对新聊天频道的订阅。 2. 每次用户更改聊天频道时，将消息数组的状态设置为空数组。 3. 取消订阅 Firebase 中的上一个节点，并订阅 componentDidUpdate 中的新节点。此处节点表示由 Firebase 中的 ID 标识的聊天频道。每个节点都包含与该特定聊天频道相关的所有消息的子节点。

async componentDidMount() {
await this.getSessionInfo();
await this.getCurrentProfile();
await this.getMessages();
};
async componentDidUpdate(prevProps) {
/* sessionID represent a chat channel and corresponding node in Firebase */
/* If user navigates from one channel to another we establish a connection with new node and get the 
corresponding messages */
if (this.props.navigation.state.params.sessionID !== prevProps.navigation.state.params.sessionID) {
await this.getSessionInfo();
await this.getCurrentProfile();
/* Subscribe to new chat channel */
await this.ref();
await this.getMessages();
}
};
async componentWillUnmount() {
/* Unsubscribe from database */
await this.off();
}
/* Get messages to display after component is mounted on screen */
getMessages = () => {
this.connect(message => {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, message),
}))
});
}
/* Each sessionID corresponds to a chat channel and node in Firebase  */
ref = () => {
return database.ref(`/sessions/${this.state.sessionID}`);
}
/* Fetch last 20 messages pertaining to given chat channel and lister to parse new incoming message */
connect = (callback) => {
this.ref()
.limitToLast(20)
.on('child_added', snapshot => callback(this.parse(snapshot)));
}
/* newly created message object in GiftedChat format */
parse = snapshot => {
const { timestamp: numberStamp, text, user } = snapshot.val();
const { key: _id } = snapshot;
const timestamp = new Date(numberStamp);
const message = {
_id,
timestamp,
text,
user,
};
return message;
};
/* function that accepts an array of messages then loop through messages */
send = (messages) => {
for (let i = 0; i < messages.length; i++) {
const { text, user } = messages[i];
const message = {
text,
user
};
this.append(message);
}
};
/* append function will save the message object with a unique ID */
append = message => this.ref().push(message);

Answer 1

根据Brett Gregson的建议和Mike Kamerman的回答，我实现了以下解决方案。

1. 当用户从一个通道导航到另一个通道时，我会触发一组函数。 this.ref(( 函数订阅新频道(Firebase 中的节点(。

async componentDidUpdate(prevProps) {
if (this.props.navigation.state.params.sessionID !== prevProps.navigation.state.params.sessionID) {
await this.getSessionInfo();
await this.ref();
await this.switchSession();
}
};

2. 我将消息状态设置为空数组以及异步/等待机制。getMessages 函数获取新通道的消息。这样，将清除属于前一组的消息，并且 UI 中不会累积消息。

switchSession = async () => {
await this.setState({ messages: [] });
await this.getMessages();
}