使用异步状态设置从类转换为功能组件

Question

I have a simple class-based component that I'm trying to convert to a function-based component, but am running into all kinds of dead ends.

My component is a straightforward adaptation of the boilerplate gifted-chat package, and uses Watson Assistant as a backend to provide responses. There's nothing complex about the backend part, these are just thin wrappers on Watson Assistants's API:

getSessionID = async (): Promise<string>

gets a session ID for use in communicating with the backend, and

sendReply = async (reply: string, sessionID: string): Promise<string>

returns Assistant's response to the string provided as a reply . These are not the source of the trouble I'm having (the bodies of both could be replaced with return await "some string" and I'd have the same issues): the class-based version (below) works perfectly.

But I'm at a loss to figure out how to convert this to a functional form, in particular:

1. I'm struggling to find a suitable replacement for componentWillMount . Using useEffect with sessionID as state results in errors: getMessage gets called (even if I await ) before the required sessionID is set.

I can avoid this by not making sessionID state (which it arguably shouldn't be) and just making it a global (as in the functional attempt below). But even if I do this:

2. After each user reply, and receipt of a response, the user reply is removed from the conversation, so that the entire conversation just consists of generated replies.

Both of these problems are, I think, linked to the lack of callbacks in the hook-based state setting idiom, but the issue could also lie elsewhere. In any case, I'm at a loss to know what to do.

---

Chatter.tsx (working class based version)

import React from 'react'
import { GiftedChat } from 'react-native-gifted-chat'
import WatsonAssistant from "../services/WatsonAssistant"



class Chatter extends React.Component {
    state = {
        messages: [],
        sessionID: null,
    }

    componentWillMount() {
        WatsonAssistant.getSessionID()
            .then((sID) => {    
                this.setState( {
                    sessionID: sID,
                } )    
            } )
            .then(() => this.getMessage(''))
            .catch((error) => {
                console.error(error)
            } )
    }

    onSend = (message = []): void => {
        this.setState((previousState) => ( {
            messages: GiftedChat.append(previousState.messages, message),
        } ), () => {
            this.getMessage(message[0].text.replace(/[\n\r]+/g, ' '))
        } )
    }

    getMessage = async (text: string): Promise<void> => {
        let response = await WatsonAssistant.sendReply(text, this.state.sessionID)
        let message = {
            _id: Math.round(Math.random() * 1000000).toString(),
            text: response,
            createdAt: new Date(),
            user: {
                _id: '2',
                name: 'Watson Assistant',
            },
        }
        this.setState((previousState) => ( {
            messages: GiftedChat.append(previousState.messages, message),
        } ))
    }

    render() {
        return (
            <GiftedChat
                messages={ this.state.messages }
                onSend={ messages => this.onSend(messages) }
                user={ {
                    _id: 1,
                } }
            />
        )
    }
}

export default Chatter

Chatter.tsx (failed function based attempt)

import React, {FC, ReactElement, useEffect, useState } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'
import WatsonAssistant from "../services/WatsonAssistant"

let sessionID: string

const Chatter: FC = (): ReactElement => {

    const [ messages, setMessages ] = useState([])

    useEffect(() => {
        const fetchData = async () => {
            WatsonAssistant.getSessionID()
                .then(sID => sessionID = sID )
                .then(() => getMessage(''))
                .catch((error) => {
                    console.error(error)
                } )
        }
        fetchData()
    }, [ ])

    const onSend = async (message = []) => {
        const newMessages = await GiftedChat.append(messages, message)
        await setMessages(newMessages)
        await getMessage(message[0].text.replace(/[\n\r]+/g, ' '))
    }

    const getMessage = async (text: string): Promise<void> => {
        let response = await WatsonAssistant.sendReply(text, sessionID)
        let message = {
            _id: Math.round(Math.random() * 1000000).toString(),
            text: response,
            createdAt: new Date(),
            user: {
                _id: '2',
                name: 'Watson Assistant',
            },
        }
        await setMessages(await GiftedChat.append(messages, message))
    }


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

}

export default Chatter

Chatter.tsx (working function based version)

import React, {FC, ReactElement, useEffect, useState } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'
import WatsonAssistant from "../services/WatsonAssistant"

let sessionID: string

const Chatter: FC = (): ReactElement => {

    const [ messages, setMessages ] = useState([])

    useEffect(() => {
        const fetchData = async () => {
            WatsonAssistant.getSessionID()
                .then(sID => sessionID = sID )
                .then(() => getMessage('', []))
                .catch((error) => {
                    console.error(error)
                } )
        }
        fetchData()
    }, [ ])

    const onSend = async (message = []) => {
        const newMessages = await GiftedChat.append(messages, message)
        await setMessages(newMessages)   // Apparently, no waiting goes on here
        await getMessage(message[0].text.replace(/[\n\r]+/g, ' '), newMessages)
    }

    const getMessage = async (text: string, currentMessages): Promise<void> => {
        let response = await WatsonAssistant.sendReply(text, sessionID)
        let message = {
            _id: Math.round(Math.random() * 1000000).toString(),
            text: response,
            createdAt: new Date(),
            user: {
                _id: '2',
                name: 'Watson Assistant',
            },
        }
        await setMessages(await GiftedChat.append(currentMessages, message))
    }


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

}

export default Chatter

Answer 1

Ok, since I don't have your full code I'm not sure this will just work as-is (in particular without the types from your dependencies I'm not sure if/how much the compiler will complain), but should give you something you can adapt easily enough.

const reducer = ({ messages }, action) => {
  switch (action.type) {
    case 'add message':
      return {
        messages: GiftedChat.append(messages, action.message),
      };

    case 'add sent message':
      return {
        // Not sure if .append is variadic, may need to adapt
        messages: GiftedChat.append(messages, action.message, action.message[0].text.replace(/[\n\r]+/g, ' ')),
      }
  }
};

const Chatter = () => {
  const [sessionID, setSessionID] = useState(null);
  const [messages, dispatch] = useReducer(reducer, []);

  const getMessage = async (text: string, sessionID: number, type: string = 'add message'): Promise<void> => {
    const response = await WatsonAssistant.sendReply(text, sessionID);
    const message = {
      _id: Math.round(Math.random() * 1000000).toString(),
      text: response,
      createdAt: new Date(),
      user: {
        _id: '2',
        name: 'Watson Assistant',
      },
    };

    dispatch({
      type,
      message,
    });
  };

  useEffect(() => {
    const fetchData = async () => {
      WatsonAssistant.getSessionID()
        .then(sID => (setSessionID(sID), sID))
        .then(sID => getMessage('', sID))
        .catch((error) => {
          console.error(error)
        });
    }
    fetchData();
  }, []);

  return (
    <GiftedChat
      messages={messages}
      onSend={messages => getMessage(messages, sessionID, 'add sent message')}
      user={{
        _id: 1,
      }}
    />
  );
};

Main difference is useReducer . As far as I can tell in the original code you had two actions: append this message or append this message and then a copy of it with the text regex replaced. I've used different dispatches to the reducer to handle the cases rather than the callback to setState . I've modified your attempt at useEffect , here I'm (ab)using the comma operator to return the ID returned from the service so that it can be fed directly to getMessage as a parameter rather than relying on state that hasn't been updated yet.

I'm still kinda skeptical in general about the hooks API, but assuming this works I actually think it simplifies the code here.