我有一個頁面，只要單擊“提交”按鈕，我就會在其中更新資訊，并且我想更新螢屏的資訊而無需重新加載頁面。
這是提交按鈕：
import React from 'react';
import { useSaveOrderItemsForList } from '../../hooks/Lists/useSaveOrderItemsForList';
import ErrorIndicator from '../shared/ErrorIndicator';
import LoadingButton from '../shared/LoadingButton';
import { valueState as valueStateAtom } from '../../atoms/orderItemsAtom';
import { useSetRecoilState } from 'recoil';
export default function SaveOrderItemsButton({ orderItems, listID }) {
const { isError, error, isLoading, mutate } = useSaveOrderItemsForList(orderItems, listID);
const setValue = useSetRecoilState(valueStateAtom);
return (
<div className={'w-100'}>
<br />
<ErrorIndicator isError={isError} error={error} />
<LoadingButton
className={'w-100'}
variant={'success'}
loading={isLoading}
onClick={() => {
mutate();
setValue([]);
window.location.reload();
}}
>
Save
</LoadingButton>
</div>
);
}
這是useSaveOrderItemsForList自定義鉤子：
import { getToken } from '../../tokens/getToken';
import { basePath } from '../../config/basePath';
import { getTokenAuthHeaders } from '../../functions/sharedHeaders';
import { useMutation, useQueryClient } from 'react-query';
async function saveOrderItemsForList({ orderItems, listID }) {
const token = await getToken();
const response = await fetch(`${basePath}/lists/save_order_items/${listID}`, {
method: 'PUT',
body: JSON.stringify({ orderItems }),
headers: getTokenAuthHeaders(token)
});
return response.json();
}
export function useSaveOrderItemsForList(orderItems, listID) {
const queryClient = useQueryClient();
return useMutation(
() => {
return saveOrderItemsForList({ orderItems, listID });
},
{
onSuccess: () => {
return queryClient.invalidateQueries('lists');
}
}
);
}
這是傳遞 onClick 事件的端點，然后加載結果：
router.put('/save_order_items/:id', TokenController.isAValidToken, async (req, res) => {
const { orderItems } = req.body;
try {
const list = await ListsController.updateOrderItems(orderItems, req.params.id);
res.json(list);
} catch (error) {
ErrorController.errorCallback(error, res);
}
});
有沒有辦法可以實作我正在尋找的服務器或客戶端？
uj5u.com熱心網友回復：
在您的首頁組件中有以下代碼：
const [, forceUpdate] = useReducer(x => x 1, 0);
function handleClick() {
forceUpdate();
}
將單擊事件發送回父級并通過強制更新來處理單擊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/460591.html
標籤：javascript 反应 表示