0

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

  1. 当它第一次加载时，它会从 API 端点api/keyword_lists获取一堆keywordLists数据。对于其中的每一个keywordLists，调用它list，我创建一个可点击的元素。

  2. 当可点击元素（包含在 a 中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)了onClickof HoverWrapper，但似乎newKeywordList.id仍然没有定义，甚至newKeywordList没有定义。

我应该怎么做才能修复它？

谢谢！

4

1 回答 1

0

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

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

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

/edit：我刚刚意识到您的调用useMutation不正确。它没有keylike 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

于 2021-01-10T06:16:28.080 回答