如何使用带有功能组件的Dialogflow和React-native实现聊天机器人

问题描述

我正在使用React本机正常工作流程（而不是expo），而且我的项目基于功能组件类型（没有类组件），因此如何实现它。我使用了react native天才聊天npm程序包..我的dilogflow api工作正常，但是消息索引没有更新，所以我缺少了一些消息

这是我的代码

import React,{ useState,useCallback,useEffect } from 'react'
import { View } from 'react-native'
import { GiftedChat } from 'react-native-gifted-chat'
import { Dialogflow_V2 } from 'react-native-dialogflow';
import { dialogFlowConfig } from '../../config'
import styles from './styles'

export default function chatScreen(props) {

    const dabbaBot = {
        _id: 2,name: 'React Native',avatar: 'https://placeimg.com/140/140/any',}

    let welcomeMessage = {

        _id: 0,text: 'Hellooooo....How are you',createdAt: new Date(),user: dabbaBot

    }

    const [messages,setMessages] = useState([welcomeMessage]);
    const [messagelength,setMessageLength] = useState(0);





    useEffect(() => {
        

        Dialogflow_V2.setConfiguration(
            dialogFlowConfig.client_email,dialogFlowConfig.private_key,Dialogflow_V2.LANG_ENGLISH_US,dialogFlowConfig.project_id
        );

    },[])

    function sendBotResponse(text) {

        let messageLength = messages.length + 2

        let msg = {
            _id: messageLength + 1,text,user: dabbaBot
        };


        console.log(msg._id)
        setMessages(messages);
        setMessages(prevIoUsMessages => GiftedChat.append(prevIoUsMessages,[msg]));


    }

    function handleGoogleResponse(result) {

        let text = result.queryResult.fulfillmentMessages[0].text.text[0];
        sendBotResponse(text);
    }


    const onSend = useCallback((messages = []) => {


        let messageLength = messages.length + 1

        let modifiedMessage = {
            text: messages[0].text,user: messages[0].user,_id: messageLength + 1,createdAt: new Date()
        }

        console.log(modifiedMessage._id)
        // // messages = messages.push(modifiedMessage)
        // // setMessages(messages)
        // setMessages(prevIoUsMessages => GiftedChat.append(prevIoUsMessages,[modifiedMessage]));

        setMessages(messages);
        setMessages(prevIoUsMessages => GiftedChat.append(prevIoUsMessages,[modifiedMessage]));


        let message = messages[0].text;
        console.log(message)

        Dialogflow_V2.requestQuery(
            message,result => handleGoogleResponse(result),error => console.log(error)
        );



    },[])


    return (

        <View style={styles.maincontainer}>
            <GiftedChat
                messages={messages}
                onSend={messages => onSend(messages)}
                user={{
                    _id: 1
                }}
            />
        </View>
    )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）