React Query useMutation 动态设置 mutationKey

Question

在我使用 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也没有定义。

我应该怎么做才能解决它？

谢谢！

Answer 1

当您调用 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)
      }
    }
  )

另请参阅：https://react-query.tanstack.com/guides/mutations

React Query useMutation 动态设置 mutationKey

React Query useMutation set mutationKey dynamically

reactjs

react-hooks

react-apollo

react-query