reactjs - 如何使用反应钩子在不刷新页面的情况下更新数据？

Question

我想使用反应和打字稿更新页面刷新数据。

我想做什么？

在详细信息视图中，我有一个带有值和编辑图标的表。单击编辑图标会将用户带到另一个页面，其中表格处于编辑模式。更改值并保存用户后导航回之前的表格视图。在这个视图中，我希望看到改变的值。但目前我看不到更新的值，除非我刷新页面。

下面是代码，

const ItemDetails = ({}: RouteComponentProps<{id: string}>) => {
    const {loading, data, refetch } = useItemDetailsQuery({
        variables,
        notifyOnNetworkStatusChange: true,
        fetchPolicy: 'network-only',
    });

    const itemDetails: Partial<Item> = data?.itemDetails
        ? data.itemDetails
        : {}
    
    const {name,description, itemVariables} = itemDetails;
    const itemVariablesData = React.useMemo(() => itemVariables ?? [], [
        itemVariables,
    ]);

    return(
        <Table // this is the table with data
            data={itemVariablesData}
        />
        <Modal //this is the view that opens after clicking edit 
        //icon on table
            isOpen={isOpen}
            tableData={controlVariablesData}
        />
    );
}

interface IModalProps {
    isOpen: boolean;
    tableData: ItemVariable[];
}

const Modal: React.FC<IModalProps> = ({
    isOpen,
    tableData,
}) => {
    const initialTableData = React.useMemo(() => 
        map(tableData, variable => ({
            ...variable,
            editedValue: variable.currentValue ?? 
            variable.defaultValue,
        })),
        [tableData],
    );

    const initialValues = React.useMemo(() => ({
        variables: initailTableData,
    }),[initialTableData]);
    return(
        <Formik 
            initialValues={initialValues]
            onSubmit={async formData => {
                try{
                    await setItemValues({
                        //somelogic
                    }),
                },
            }
         >
             {formikProps => {
                 const {handleSubmit} = formikProps;
                 return (
                     <Modal
                         isOpen={isOpen}
                         title="Modify"
                         actions={
                             <button onClick={() => 
                                 handleSubmit()}
                              >Save</button>
                         }
                     />
                 )
             </Formik>
         );
                  

上面的代码工作正常，但除非页面刷新，否则不会更新表中的数据

我试图做什么？

解决方案1 ​​我正在考虑使用useMemo 并查看表数据是否在没有页面刷新的情况下更新。

const itemDetails: Partial<Item> = React.useMemo(
    () => {
        return data?.itemDetails
            ? data.itemDetails
            : {}
    }, [data]
);

但仍然无法正常工作。

解决方案 2 我尝试在 onSubmit 方法的 try 块中调用 refetch 方法。即在单击保存按钮后 onSubmit 方法将被调用。如下所示，

From the ItemDetails Component i am passing refetch method to 
Modal component

return(
    <Table // this is the table with data
        data={itemVariablesData}
    />
    <Modal //this is the view that opens after clicking edit 
    //icon on table
        isOpen={isOpen}
        tableData={controlVariablesData}
        refetch={refetch}
    />
);
}
In the modal component i have called refetch method 

interface IModalProps {
    isOpen: boolean;
    tableData: ItemVariable[];
    refetch: () => void;
}

const Modal: React.FC<IModalProps> = ({
    isOpen,
    tableData,
    refetch,
}) => {
return(
    <Formik 
        initialValues={initialValues]
        onSubmit={async formData => {
            try{
                await setItemValues({
                    //somelogic
                }),
                refetch();
             },
        }
    >

这个解决方案有效。但问题是有另一个组件“ListComponent”使用这个模态组件，如下所示，

const ListComponent =({}) : RouteComponentProps<>) => {
    const {loading, data, refetch} = useListQuery({
        fetchPolicy: 'network-only',
        notifyOnNetworkStatusChange: true,
    });
    return(
        <Modal
            tableData={tableData}// here refetch is not passed
        />
    );
}

所以问题是如何在 IModalProps 和 Modal 组件中将 refetch 道具作为非强制性道具，如果存在 refetch 方法，我如何才能调用 refetch 方法。

我也不确定这是否是正确的解决方案。有人可以帮我解决这个问题。谢谢。

我是反应和打字的新手。在学习的过程中。

标签： reactjstypescript