Question

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

当它第一次加载时，它从 API 端点 api/keyword_lists 获取一堆 keywordLists 数据。对于这些 keywordLists 中的每一个，我称之为 list，我创建了一个可点击的元素。
当可点击元素（包裹在 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>
    </>
  )
}

尽管在 setNewKeywordList(list) 的 onClick 中调用了 HoverWrapper，但似乎 newKeywordList.id 仍未定义，甚至 newKeywordList 也未定义。

我该怎么做才能修复它？

谢谢！

Answer 1

当您调用 useState 的 setter 时，react 不会立即执行状态更新 - 更新只是“调度”。因此，即使您调用 setNewKeywordList，newKeywordList 也不会在下一行代码中具有新值 - 仅在下一个渲染周期中。

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

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

/edit：我刚刚意识到您对 useMutation 的调用不正确。它没有像 key 那样的 useQuery，它必须提供一个函数作为第一个带变量的参数，称为变异函数：

  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

1 个答案: