Question

问题描述：每当我向后端发送请求时，我都会尝试更新我的组件。我现在在后端收到 3 个请求（创建、更新和删除），当我创建一个项目时它会正常更新，但是当我更新或删除一个时，它根本不会更新数据。

场景：

我有一个钩子调用第一次渲染：

useEffect(() => {
    refreshData();
}, []);

为了根据发送的请求进行更新，我有 refreshData 功能：

const refreshData = async () => {
    let enums = await api.get('users/enum');
    setUsersEnum(enums.data);
    let equipments = await api.get('equipments/fixo');
    setData(equipments.data);
};

对于 CUD 操作，我得到了这个功能：

PS：在按钮动作时调用此函数。

const handleNew = async (e) => {
    modalAddNew(!addNew);
    let form = { ...addForm };
    if (form.warranty !== '') {
        form = {
            ...form,
            maintenance: {
                warranty: form.warranty,
                maintainer: form.maintainer,
                details: form.details,
            },
        };
    }
    delete form.warranty;
    delete form.maintainer;
    delete form.details;
    await api.post('equipments', form);
    await refreshData();

    handleChangeAddForm({
        id: '',
        brand: '',
        type: '',
        specs: '',
        user_id: '2041',
        category: enums.categories.default,
        status: 'FIXO',
        warranty: '',
        details: '',
        maintainer: '',
    });
};

const handleEdit = (id) => {
    setModalEdit(!modalEdit);
    let form = { ...editForm };
    delete form.id;
    delete form.department;
    delete form.description;
    delete form.specs;
    api.patch(`equipments/${id}`, form).then((response) => {
        refreshData();
        console.log('test');
    });
    handleChangeEditForm({
        id: '',
        user_id: '2041',
        description: '',
        department: 'NTI',
        status: 'FIXO',
        warranty: '',
        details: '',
        maintainer: '',
    });
};

const handleDelete = async (id) => {
    setModalEdit(!modalEdit);
    await api.delete(`equipments/${id}`);
    await refreshData();
};

尝试过的解决方案：

我做的第一件事就是尝试只调用 refreshData 函数每当我完成一个请求（不起作用）。
在那之后，我尝试了 useEffect + useState 和一个不断变化的变量（不起作用）

它应该如何工作：每当我提出请求时，状态都应该改变，这样我就可以在不刷新页面的情况下可视化它。正确的方法是什么？请只分享想法而不是解决方案。

Obs：您看到补丁请求回调中的 console.log('test'); 了吗？无论如何它都不会登录终端。不过后端请求有效。

发送后端请求时反应不更新状态

0 个答案: