javascript - API 更改后重新渲染 React 组件
问题描述
我无法显示我通过 hendleSubmit 函数发布到 api 的消息。消息被发送并添加到数组中,但它不会立即显示,只有在我重新加载页面时才会显示。有人可以帮我弄这个吗?
这是我的代码:
export const ConversationForm = () => {
const { isLoading, data={} } = useQuery(['conversationForm'], () => conversationMessageService.getConversationMessages());
}
declaration of the component and getting data from api in 'data' array
<Grid container className={classes.conversation}>
<SadStates
states={[
{
when: isLoading,
render: <Loader/>
}
]}>
{data.items===undefined?
<img src={emptyChatIcon} alt={''}/>:
<ScrollToBottom mode='bottom' className={classes.scrollBottom}>
{data.items.map((message) => {
return (
<ConversationMessage
message={message}
key={message.id}
customerName={customerName}
userName={userName}/>
);
})}
</ScrollToBottom>
}
</SadStates>
</Grid>
调用子组件以逐条打印消息
<Formik
initialValues={{
userPhone: userPhone,
customerPhone: customerPhone,
conversationMessageSender: conversationMessageSender,
body: '',
conversationMessageType: 1}}
onSubmit={handleSubmit}>
{({}) => (
<Form>
<Grid container>
<Grid item>
<ConversationInputField inputName='body'/>
</Grid>
<Grid item>
<button type='submit'>
<Grid item>
<img src={sendIcon} alt={''}/>
</Grid>
</button>
</Grid>
</Grid>
</Form>
)}
</Formik>
我在提交时调用 post 方法的表单
const handleSubmit = async( values, { setSubmitting }) => {
try {
await conversationMessageService.createConversatonMessage(values);
values.body='';
setSubmitting(false);
} catch (error) {
console.log(error);
}
};
处理提交功能
解决方案
我在您的代码中没有看到任何地方重新获取提交的数据。您的前端应该如何知道您已在后端将 X 更改为 Y?
提交后重新获取它并刷新保存数据的本地状态和/或在从后端获取正确值时对本地状态进行乐观更新。
React 查询是一个非常好的工具。变异数据还允许您取消先前的查询(开始自动刷新)并进行乐观更新,您可以在其中预测您的状态将是什么样子,以防您正在处理的数据需要更长的时间来加载/非常复杂性,以避免让用户等待。
推荐阅读
- r - R中的integrate()函数为涉及for循环的被积函数提供错误
- python - 使用 DataFrame 循环遍历字典列表
- c - 如何在 AVR C 中实现 arduino Uno shiftOut()?
- python - 使用 json 文件和目录时间戳生成 csv 文件的 Python 实现
- dictionary - Golang 深度合并两张地图
- huawei-mobile-services - 为什么在 HMs Location Awareness 中进入障碍,在执行应用程序时几秒钟后状态变为 FALSE?
- angular - 在 Angular 模板中使用元组类型
- javascript - 如何模拟数据以使用模拟器测试 Firestore
- rest - 如何为相互依赖的资源设计 REST API?
- php - 数据未从 codeigniter 中的数据库中获取