React Query useMutation 动态设置mutationKey

Question

在我使用 React Query 的 React 项目中，我有一个功能组件 MoveKeywordModal，这样：

1. 当它第一次加载时，它会从 API 端点 api/keyword_lists 获取一组 keywordLists 数据。对于每一个keywordLists，我称之为list，我创建了一个可点击的元素。

2. 当可点击元素（包裹在HoverWrapper 中）被点击时，我想向api/keyword_lists/:list_id/keyword_list_items/import 发送一个带有一些数据的POST API 请求。 其中: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 的设置器时，react 不会立即执行状态更新 - 更新只是“计划的”。因此，即使您调用 setNewKeywordList，newKeywordList 也不会在下一行代码中具有新值 - 仅在下一个渲染周期中。

因此，当您在事件处理程序中时，您必须使用 list 变量：

setNewKeywordList(list)
moveKeywordsToList({
    variables: { newKeywordList: list, data: keywordsToMove }
 })

/edit：我刚刚意识到您对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