更新屏幕而不重新加载它

Question

我有一个页面，我一点击 'Submit' 按钮就更新信息，我想更新屏幕的信息而不必重新加载页面。

这是提交按钮：

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

有没有一种方法可以实现我正在寻找的服务器端或客户端？

Answer 1

在您的首页组件中有此代码：

const [, forceUpdate] = useReducer(x => x + 1, 0);

  function handleClick() {
    forceUpdate();
  }

将点击事件发送回父级并通过强制更新处理点击。

更新屏幕而不重新加载它

Updating a screen without reloading it

javascript

express

reactjs