API 更改后重新渲染 React 组件
Rerender React component after API is changed
我无法通过 hendleSubmit 函数显示我 post 到 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?
提交后重新获取它并刷新保存数据的本地状态and/or在从后端获取正确值的同时对本地状态进行乐观更新。
React 查询是一个非常好的工具。变异数据还允许您取消以前的查询(开始自动刷新)并进行乐观更新,您可以在其中预测您的状态将是什么样子,以防您正在处理的数据需要更长的时间 load/is 本质上非常复杂,以避免让用户等待。
我无法通过 hendleSubmit 函数显示我 post 到 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?
提交后重新获取它并刷新保存数据的本地状态and/or在从后端获取正确值的同时对本地状态进行乐观更新。
React 查询是一个非常好的工具。变异数据还允许您取消以前的查询(开始自动刷新)并进行乐观更新,您可以在其中预测您的状态将是什么样子,以防您正在处理的数据需要更长的时间 load/is 本质上非常复杂,以避免让用户等待。