1

我有一个items/[id]用于创建和编辑项目的页面。我使用 -1 作为新项目的项目 ID 以区分创建和编辑模式。它是一个功能组件,如下所示

const getItem = (id) => {
    if (id > 0) {
        return useQuery(GET_ITEM_DETAILS, { variables: { id }})
    }
    return { loading: false, data: { product: {} } }
}

const itemForm = (props) => {
    const { loading, error, data } = getItem(props.id)

    /* RENDERING LOGIC*/
}

表单提交根据 id 值调用创建或更新突变。在onCompleted创建突变的处理程序中,我添加了一个路由器调用来更新 id,如下所示:

router.replace(`/items/[id]`, `/items/${id}`)

当此路由发生时,我在useQuery.

Unhandled Runtime Error
TypeError: queryData.ssrInitiated is not a function
4

1 回答 1

0

运行时错误的发生是因为 React 处理钩子和渲染的方式。使用 NextJSrouter.replace()尝试转换到同一页面而不重新加载它,可能会导致useQuery钩子出现问题。

简单地使用window.location应该可以解决问题:

window.location.replace(`/items/${id}`)
于 2020-12-04T09:15:40.043 回答