Error: Should have a queue. This is likely a bug in React. Please file an issue. - react-query

Question

我只在生产环境中遇到错误，我的开发机器运行使用 yarn dev 的代码很好。

好像跟react-query hook有关useQuery。该错误是在调用 useQuery 挂钩的组件内部触发的。 API 调用由 useQuery 函数触发，我可以在控制台中看到该调用。

组成部分如下：

import { useQuery } from "react-query"
import { useRecoilState, useRecoilValue } from "recoil"
import {
    MenuItem,
    Skeleton,
    InputLabel,
    FormControl,
    Select,
} from "@mui/material"

import fetchIcpDropdownData from "../queries/fetchIcpDropdownData"
import { icpDropdownValueAtom, organisationIdAtom } from "../state/atoms"

export const FilterIcp = () => {
    const organisationId = useRecoilValue(organisationIdAtom)
    const icpDropdownQuery = useQuery(
        ["icpDropdownQuery", organisationId],
        () => fetchIcpDropdownData(organisationId)
    )
    const [icpDropdownValue, setIcpDropdownValue] =
        useRecoilState(icpDropdownValueAtom)
    const handleIcpDropdownChange = (event) => {
        setIcpDropdownValue(event.target.value)
    }

    if (icpDropdownQuery.error) return null

    return (
        <FormControl variant="outlined" sx={{ m: 2, minWidth: 190 }}>
            <InputLabel id="icp-label">Ideal Customer Profile</InputLabel>
            <Select
                labelId="icp-label"
                id="icp"
                value={icpDropdownValue}
                label="Ideal Customer Profile"
                onChange={handleIcpDropdownChange}
            >
                <MenuItem key={0} value={0}>
                    All
                </MenuItem>
                {icpDropdownQuery.isLoading ? (
                    <MenuItem key={1} value={-1}>
                        <Skeleton />
                    </MenuItem>
                ) : (
                    icpDropdownQuery.data.map((menuItem) => (
                        <MenuItem key={menuItem.id} value={menuItem.id}>
                            {menuItem.description}
                        </MenuItem>
                    ))
                )}
            </Select>
        </FormControl>
    )
}

export default FilterIcp

fetchDropdownData如下

import { AuraApi } from "../configuration/axios"

const fetchIcpDropdownData = async (organisationId) => {
    const requestUrl = "dropdown/icp/?organisation_id=" + organisationId
    const result = await AuraApi.get(requestUrl).then(
        (response) => response.data
    )
    return result
}

export default fetchIcpDropdownData

Answer 1

好的，所以这与 react-query 无关，实际上是我试图在 React 组件之外使用钩子。

具体来说，这是我尝试使用选择器通过 useSession 挂钩将会话变量分配给状态变量作为原子 (organisationIdAtom) 的默认值。

React 发出的错误消息很糟糕，但这是问题所在，现在已解决。

Error: Should have a queue. This is likely a bug in React. Please file an issue. - react-query

Error: Should have a queue. This is likely a bug in React. Please file an issue. - react-query

reactjs

next.js

react-hooks

recoiljs

react-query