Error: Rendered more hooks than during the previous render.
function useIndicator() {
const params = useParams<{token: string, chart: string}>()
const {data} = useQuery({
queryKey: ['indicator'],
queryFn: async () => {
const res = await fetch("http://localhost:3000/api/assets/" + params.token)
const data = await res.json() as AssetsModel[]
const ind = data.map((i) => i.categories.map((c) => c.subcategories.map((w) => w.indicators.find((ind => ind.short_name === params.chart)))))[0][0]
return ind[0]
}
})
return data
}
function usePrice() {
const {data} = useQuery({
queryKey: ['price'],
queryFn: async () => {
const res = await fetch("http://localhost:3000/api/price?symbol=BTCUSDT&r=1d")
const data = await res.json()
return data
}
})
return data
}
export function createChartFactory(urlSearchParams: URLSearchParams) {
const indicator = useIndicator()
if(!indicator) return null
const price = usePrice()
return {
indicator,
price
}
}
3 Replies
united-yellow•2y ago
usePrice is called conditionally. Read react rules of hooks!
protestant-coralOP•2y ago
but how can i use on the top of the .ts file and check if indicator is not null or undefined? I dont wanna use indicators?.prop @M00LTi
it doesnt working:
function useIndicator(params: { token: string, chart: string }) {
const { data, error, isError, isLoading, } = ...
if(error || isError || isLoading) return null
return data
}united-yellow•2y ago
Did you read the rules of hooks?