我有一个简单的基于类的组件，我试图将其转换为基于函数的组件，但遇到了各种死胡同。
我的组件是样板 gifted-chat 包的直接改编，并使用 Watson Assistant 作为后端来提供响应。后端部分并不复杂，这些只是 Watson Assistants API 的薄包装器:
getSessionID = async (): Promise<string>
获取用于与后端通信的 session ID，并且
sendReply = async (reply: string, sessionID: string): Promise<string>
返回 Google 助理对作为回复提供的字符串的响应。这些不是我遇到的麻烦的根源(两者的主体都可以替换为 return wait "some string" 并且我会遇到相同的问题):基于类的版本(下面)完美地工作。
但我不知道如何将其转换为函数形式，特别是:
- 我正在努力寻找
componentWillMount的合适替代品。使用useEffect和sessionID作为状态会导致错误:getMessage在所需的消息之前被调用(即使我await) sessionID 已设置。
我可以通过不设置 sessionID 状态(可以说它不应该是这样)并使其成为全局状态(如下面的功能尝试中所示)来避免这种情况。但即使我这样做:
我认为，这两个问题都与基于钩子(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
最佳答案
好吧，因为我没有你的完整代码，我不确定这是否会按原样工作(特别是没有依赖项中的类型，我不确定编译器是否/会提示多少)，但应该给你一些你可以轻松适应的东西。
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 使用了不同的调度来处理这些情况，而不是对 setState 进行回调。我修改了您对 useEffect 的尝试，这里我 (ab) 使用逗号运算符返回从服务返回的 ID，以便可以将其直接提供给 getMessage 作为参数而不是依赖于尚未更新的状态。
总的来说，我仍然对 hooks API 持怀疑态度，但假设它有效，我实际上认为它简化了这里的代码。
关于javascript - 使用异步状态设置从类转换为功能组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57648128/