ReactNativeでチャットアプリの制作をしています。
ユーザーがチャットを送信するとTalkAPIからレスポンスが返ってくるというシンプルなものです。
問題は、送信したチャットの内容とレスポンスをFirestoreに保存したいと思っているのですが、現在のコードですとAPIからのレスポンスのみが保存されます。
Firestoreの内容をチャット画面に反映したいと思っておりますので2つともDBに保存したいです。
①の後に②を実行させたく思います。
非同期処理について今一理解に乏しい面もあってなかなか解決できません。
お力添え宜しくお願い致します!
javascript
1import { StatusBar as ExpoStatusBar } from 'expo-status-bar'; 2import React, {useState} from 'react'; 3import { StyleSheet, TextInput, SafeAreaView, View, Button } from 'react-native'; 4import { getMessageDocRef } from '../lib/firebase'; 5import firebase from 'firebase'; 6import axios from 'axios'; 7 8export default function ChatScreen() { 9 const [text, setText] = useState(''); 10 const url = 'https://api.a3rt.recruit-tech.co.jp/talk/v1/smalltalk'; 11 const apiKey = '*****'; 12 const sendMessage = async (value) =>{ 13 if(value !== ''){ 14 const docRef = await getMessageDocRef(); 15 const newMessage = { 16 text: value, 17 created_at: firebase.firestore.Timestamp.now(), 18 userId: '1' 19 } 20 await docRef.set(newMessage); ・・・・・① 21 let params = new FormData(); 22 params.append("apikey", apiKey); 23 params.append("query", newMessage.text ); 24 const response = await axios.post(url,params) 25 const responseMessage = ({text: response.data.results[0].reply, 26 created_at: firebase.firestore.Timestamp.now(), 27 userId: 'TalkAPI'}) 28 docRef.set(responseMessage); ・・・・・② 29 setText(''); 30 }else{ 31 alert('error') 32 } 33 } 34 35 return ( 36 <SafeAreaView style={styles.container}> 37 <ExpoStatusBar style="light" /> 38 <View style={styles.inputTextContainer}> 39 <TextInput 40 styls={styles.inputText} 41 onChangeText={(value)=>{ 42 setText(value) 43 }} 44 value={text} 45 placeholder="Plese enter a message" 46 placeholderTextColor="#777" 47 autoCapitalize="none" 48 autoCorrect={false} 49 returnKeyType="done" 50 /> 51 <Button title="send" onPress={() => {sendMessage(text)}} /> 52 </View> 53 </SafeAreaView> 54 ); 55 }
JavaScript
1firebase.js 2一部省略 3export const getMessageDocRef = async () => { 4 return await firebase.firestore().collection('message').doc(); 5}
あなたの回答
tips
プレビュー