React Query useMutation 动态设置 mutationKey
React Query useMutation set mutationKey dynamically
在我使用 React Query 的 React 项目中,我有一个功能组件 MoveKeywordModal
这样:
首次加载时,它会从 API 端点 api/keyword_lists
获取一堆 keywordLists
数据。对于这些 keywordLists
中的每一个,我都将其命名为 list
,我创建了一个可点击的元素。
当可点击元素(包裹在 HoverWrapper
中)被点击时,我想发送一个 POST API 请求到 api/keyword_lists/:list_id/keyword_list_items/import
一些数据。
其中 :list_id
是刚刚单击的列表的 ID。
export const MoveKeywordModal = ({
setShowMoveKeywordModal,
keywordsToMove
}) => {
const { data: keywordLists } = useQuery('api/keyword_lists', {})
const [newKeywordList, setNewKeywordList] = useState({})
const { mutate: moveKeywordsToList } = useMutation(
`api/keyword_lists/${newKeywordList.id}/keyword_list_items/import`,
{
onSuccess: data => {
console.log(data)
},
onError: error => {
console.log(error)
}
}
)
const availableKeywordLists = keywordLists
.filter(l => l.id !== activeKeywordList.id)
.map(list => (
<HoverWrapper
id={list.id}
onClick={() => {
setNewKeywordList(list)
moveKeywordsToList({
variables: { newKeywordList, data: keywordsToMove }
})
}}>
<p>{list.name}</p>
</HoverWrapper>
))
return (
<>
<StyledModal
isVisible
handleBackdropClick={() => setShowMoveKeywordModal(false)}>
<div>{availableKeywordLists}</div>
</StyledModal>
</>
)
}
尽管在HoverWrapper
的onClick
中调用了setNewKeywordList(list)
,但似乎newKeywordList.id
仍然没有定义,甚至newKeywordList
也没有定义。
我应该怎么做才能解决它?
谢谢!
当您调用 useState
的 setter 时,react 不会立即执行状态更新 - 更新只是 'scheduled'。因此,即使您调用 setNewKeywordList
,newKeywordList
也不会在下一行代码中具有新值 - 仅在下一个渲染周期中。
因此,当您在事件处理程序中时,您必须使用 list
变量:
setNewKeywordList(list)
moveKeywordsToList({
variables: { newKeywordList: list, data: keywordsToMove }
})
/编辑:我刚刚意识到你对 useMutation
的调用是不正确的。它没有像 useQuery
这样的 key
,它必须提供一个函数作为接受变量的第一个参数,称为变异函数:
const { mutate: moveKeywordsToList } = useMutation(
(variables) => axios.post(`api/keyword_lists/${variables.newKeywordList.id}/keyword_list_items/import`),
{
onSuccess: data => {
console.log(data)
},
onError: error => {
console.log(error)
}
}
)
在我使用 React Query 的 React 项目中,我有一个功能组件 MoveKeywordModal
这样:
首次加载时,它会从 API 端点
api/keyword_lists
获取一堆keywordLists
数据。对于这些keywordLists
中的每一个,我都将其命名为list
,我创建了一个可点击的元素。当可点击元素(包裹在
HoverWrapper
中)被点击时,我想发送一个 POST API 请求到api/keyword_lists/:list_id/keyword_list_items/import
一些数据。 其中:list_id
是刚刚单击的列表的 ID。
export const MoveKeywordModal = ({
setShowMoveKeywordModal,
keywordsToMove
}) => {
const { data: keywordLists } = useQuery('api/keyword_lists', {})
const [newKeywordList, setNewKeywordList] = useState({})
const { mutate: moveKeywordsToList } = useMutation(
`api/keyword_lists/${newKeywordList.id}/keyword_list_items/import`,
{
onSuccess: data => {
console.log(data)
},
onError: error => {
console.log(error)
}
}
)
const availableKeywordLists = keywordLists
.filter(l => l.id !== activeKeywordList.id)
.map(list => (
<HoverWrapper
id={list.id}
onClick={() => {
setNewKeywordList(list)
moveKeywordsToList({
variables: { newKeywordList, data: keywordsToMove }
})
}}>
<p>{list.name}</p>
</HoverWrapper>
))
return (
<>
<StyledModal
isVisible
handleBackdropClick={() => setShowMoveKeywordModal(false)}>
<div>{availableKeywordLists}</div>
</StyledModal>
</>
)
}
尽管在HoverWrapper
的onClick
中调用了setNewKeywordList(list)
,但似乎newKeywordList.id
仍然没有定义,甚至newKeywordList
也没有定义。
我应该怎么做才能解决它?
谢谢!
当您调用 useState
的 setter 时,react 不会立即执行状态更新 - 更新只是 'scheduled'。因此,即使您调用 setNewKeywordList
,newKeywordList
也不会在下一行代码中具有新值 - 仅在下一个渲染周期中。
因此,当您在事件处理程序中时,您必须使用 list
变量:
setNewKeywordList(list)
moveKeywordsToList({
variables: { newKeywordList: list, data: keywordsToMove }
})
/编辑:我刚刚意识到你对 useMutation
的调用是不正确的。它没有像 useQuery
这样的 key
,它必须提供一个函数作为接受变量的第一个参数,称为变异函数:
const { mutate: moveKeywordsToList } = useMutation(
(variables) => axios.post(`api/keyword_lists/${variables.newKeywordList.id}/keyword_list_items/import`),
{
onSuccess: data => {
console.log(data)
},
onError: error => {
console.log(error)
}
}
)