ReactNativeでFirestoreに複数データを挿入したい
解決したいこと
ReactNativeでチャットアプリの制作をしています。
ユーザーがチャットを送信するとTalkAPIからレスポンスが返ってくるというシンプルなものです。
問題は、送信したチャットの内容とレスポンスをFirestoreに保存したいと思っているのですが、現在のコードですとAPIからのレスポンスのみが保存されます。
Firestoreの内容をチャット画面に反映したいと思っておりますので２つともDBに保存したいです。
①の後に②を実行させたく思います。
非同期処理について今一理解に乏しい面もあってなかなか解決できません。
お力添え宜しくお願い致します！
該当するソースコード
import { StatusBar as ExpoStatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { StyleSheet, TextInput, SafeAreaView, View, Button } from 'react-native';
import { getMessageDocRef } from '../lib/firebase';
import firebase from 'firebase';
import axios from 'axios';
export default function ChatScreen() {
const [text, setText] = useState('');
const url = 'https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk';
const apiKey = '*****';
const sendMessage = async (value) =>{
if(value !== ''){
const docRef = await getMessageDocRef();
const newMessage = {
text: value,
created_at: firebase.firestore.Timestamp.now(),
userId: '1'
}
await docRef.set(newMessage); ・・・・・①
let params = new FormData();
params.append("apikey", apiKey);
params.append("query", newMessage.text );
const response = await axios.post(url,params)
const responseMessage = ({text: response.data.results[0].reply,
created_at: firebase.firestore.Timestamp.now(),
userId: 'TalkAPI'})
docRef.set(responseMessage); ・・・・・②
setText('');
}else{
alert('error')
}
}
return (
<SafeAreaView style={styles.container}>
<ExpoStatusBar style="light" />
<View style={styles.inputTextContainer}>
<TextInput
styls={styles.inputText}
onChangeText={(value)=>{
setText(value)
}}
value={text}
placeholder="Plese enter a message"
placeholderTextColor="#777"
autoCapitalize="none"
autoCorrect={false}
returnKeyType="done"
/>
<Button title="send" onPress={() => {sendMessage(text)}} />
</View>
</SafeAreaView>
);
}
0