如何更新react-native-gifted-chat中的消息状态？

Question

我依靠API调用在React Native应用程序中使用react-native-gifted-chat发送消息，我希望流程就像当用户单击发送按钮时它的状态应该为

pending:true

并且当API 调用成功，我希望它能够实现，因为

pending:false,sent:true

我可以实现第一部分，但即使 API 调用成功，它也不会更新状态。下面是我的实现，我正在尝试遵循[此处][1]发布的解决方案，但我认为我的实现有问题，如果需要任何说明，请告诉我。

function SmsConversations({ route }) {

  const onSend = useCallback((messages = []) => {
    const [messageToSend] = messages;
    messageToSend.pending = true;
    sendSMS(toNumber, fromNumber, messageToSend.text)
      .then((res) => {
        messageToSend.pending = false;
        messageToSend.sent = true;
      })
      .catch((err) => (messageToSend.pending = true))
      .done();
    setMessages((previousMessages) =>
      GiftedChat.append(previousMessages, messageToSend)
    );
  }, []);

  return (
    <GiftedChat
      messages={messages}
      onSend={(messages) => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  );
}

此外，如果 API 出错，是否有办法使用 React-native-gifted-chat 来处理它，例如失败或其他什么？

Answer 1

您可以追加（）不同的消息以进行加载和错误处理。

用于装载--

您可以追加留言

setMessages((previousMessages) =>
  GiftedChat.append(previousMessages,{
     pending: true,
     sending: false,
     text: 'Loading...'
}));

您可以使用

删除加载消息

setMessages(previousMessages => {
    let newMessages = [...previousMessages];
    newMessages.shift();
    setTyping(1);
    return GiftedChat.append(newMessages, response)})

对于错误处理，您必须在 catch 块中附加带有错误的相同消息，然后就完成了。