无法在useEditProject里使用useSearchParams，否则一进入编辑modal过一会就报如下错

Question

export const useUrlQueryParam = <K extends string>(keys: K[]) => {
    const [searchParams] = useSearchParams();
    const setSearchParams = useSetUrlSearchParam();
    const [stateKeys] = useState(keys);
    return [
        useMemo(
            () =>
                subset(Object.fromEntries(searchParams), stateKeys) as {
                    [key in K]: string;
                },
            [searchParams, stateKeys]
        ),
        (params: Partial<{ [key in K]: unknown }>) => {
            return setSearchParams(params);
            // iterator
            // iterator: https://codesandbox.io/s/upbeat-wood-bum3j?file=/src/index.js
        },
    ] as const;
};

export const useSetUrlSearchParam = () => {
    const [searchParams, setSearchParam] = useSearchParams();
    return (params: { [key in string]: unknown }) => {
        const o = cleanObject({
            ...Object.fromEntries(searchParams),
            ...params,
        }) as URLSearchParamsInit;
        return setSearchParam(o);
    };
};

export const useProjectsSearchParams = () => {
    const [param, setParam] = useUrlQueryParam(["name"]);
    return [
        useMemo(
            () => ({ ...param}),
            [param]
        ),
        setParam,
    ] as const;
};

export const useEditProject = () => {
    const client = useHttp();
    const queryClient = useQueryClient();
    const [searchParams] = useProjectsSearchParams()
    console.log(searchParams)
    //const queryKey = ['projects', searchParams]
    const result = useMutation((params: Partial<Project>) => client(`projects/${params.id}`, {
        data: params,
        method: 'PATCH'
    }), {
        onSuccess: () => queryClient.invalidateQueries('projects'),
        // async onMutate(target) {
        //     const previousItems = queryClient.getQueryData(queryKey)
        //     queryClient.setQueryData(queryKey, (old?: Project[]) => {
        //         return old?.map(project => project.id === target.id ? {...project, ...target} : project) || []
        //     })
        //     return {previousItems}
        // },
        // onError(error, newItem, context) {
        //     queryClient.setQueryData(queryKey, (context as { previousItems: Project[] }).previousItems)
        // }

    })
    return result
}

Answer 1

瘸腿猫Vivian 2022-09-07 21:10:42

我也是 请问同学解决了吗

• 瘸腿猫Vivian #1

  在这节课 抽象出去之前就有问题的 把callback抽象出去use-optimistic-options后 就好了...玄学
  希望有同学或者老师可以讲解一下 为什么抽出去之前按照题主的这个写法 进入编辑会报错  新增没问题 我找了半天 发现useEffect没更新 editingProject的状态 不知道运行到哪一步JS报错了这个.length

Answer 2

Nolan 2021-04-22 13:42:16

对比一下源代码吧，看看有什么不一样