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

Question

我有一个简单的基于类的组件，我试图将其转换为基于函数的组件，但遇到了各种死胡同。

我的组件是对样板 gifted-chat 包的直接改编，并使用 Watson Assistant 作为后端来提供响应。后端部分并不复杂，这些只是 Watson Assistants API 的简单包装:

getSessionID = async (): Promise<string>

获取用于与后端通信的 session ID，以及

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

返回 Assistant 对作为 reply 提供的字符串的响应。这些不是我遇到的麻烦的根源(两者的主体都可以用 return await "some string" 替换，我会遇到同样的问题):基于类的版本(下面)完美地工作。

但我不知道如何将其转换为函数形式，特别是:

1. 我正在努力寻找 componentWillMount 的合适替代品。使用 useEffect 和 sessionID 作为状态会导致错误: sessionID 已设置。

我可以通过不创建 sessionID 状态(可以说它不应该是)而只是将其设置为全局状态(如下面的功能尝试)来避免这种情况。但即使我这样做:

1. 在每个用户回复并收到回复后，用户回复将从对话中删除，这样整个对话就只包含生成的回复。

我认为，这两个问题都与基于钩子(Hook)的状态设置习惯用法中缺少回调有关，但问题也可能存在于其他地方。无论如何，我不知所措。

---

Chatter.tsx(基于 worker 类(Class)的版本)

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(失败的基于函数的尝试)

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(基于工作函数的版本)

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

好吧，因为我没有你的完整代码，我不确定这是否会按原样工作(特别是没有来自你的依赖项的类型，我不确定编译器是否/有多少会提示)，但应该给你一些你可以很容易适应的东西。

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,
      }}
    />
  );
};

主要区别在于useReducer。据我所知，在原始代码中您有两个操作:附加此消息或附加此消息，然后将其副本替换为文本正则表达式。我对 reducer 使用了不同的分派(dispatch)来处理这些情况，而不是对 setState 的回调。我已经修改了您在 useEffect 上的尝试，在这里我(滥用)使用逗号运算符返回从服务返回的 ID，以便它可以直接馈送到 getMessage 作为参数而不是依赖尚未更新的状态。

总的来说，我仍然对 hooks API 持怀疑态度，但假设这可行，我实际上认为它简化了此处的代码。