错误:
错误:无效的挂接调用。挂钩只能在身体内部使用 功能组件。可能发生以下情况之一 原因
您好,我尝试在操作中使用useDispatch,但它是由于无效的钩子而产生此错误的
我解决不了
有人可以帮助我吗?
我的动作
import {FETCH_FAIL,FETCH_LOADING,FETCH_SUCESS} from './actionType';
import api from '../../../services/api';
import { useDispatch } from "react-redux";
const FetchSucess = data => (console.log(data),{
type:FETCH_SUCESS,
data
});
const FetchFailed = error => ({
type:FETCH_FAIL,
error
});
const isLoadingFetch = () => ({type: FETCH_LOADING})
export default function AllProducts () {
const dispatch = useDispatch()
dispatch(isLoadingFetch());
// fetching data
api.get('/products')
.then( response => { dispatch(FetchSucess(response.data))})
.catch( err => { dispatch(FetchFailed(err.message));});
}
我的组件
import React, { useState, useEffect } from 'react';
export default function Cards() {
useEffect(() => {
// This will be invoked only once.
getAllProducts();
}, []);
const classes = useStyles();
const classes2 = useStyles2();
const products = useSelector(state => state.data.filteredProducts);
return (
<div className="App">
<Container maxWidth="md" className={classes.root}>
<Grid container md={4} spacing={1} ></Grid>
<Grid container md={8} spacing={1} alignItems={"center"}>
{products.map(product => (
<Grid item lg={4} md={4} sm={12} xs={12}>
<Card className={classes2.card}>
<CardMedia
className={classes2.media}
image={
"https://www.theclutch.com.br/wp-content/uploads/2019/11/skins-csgo-neymar.jpg"
}
/>
<CardContent className={classes2.content}>
<Typography
className={classes2.name}
variant={"h6"}
gutterBottom
>
{product.name}
</Typography>
<Typography
className={classes2.price}
variant={"h1"}
>
{util.formatCurrency(product.price)}
</Typography>
</CardContent>
</Card>
</Grid>
))}
</Grid>
</Container>
</div>
);
}
答案 0 :(得分:1)
基于以上评论:
所有产品都是我的行动
如果Error:Kotlin: [Internal Error] java.lang.ArrayIndexOutOfBoundsException: 10883
at org.jetbrains.org.objectweb.asm.ClassReader.readUnsignedShort
(ClassReader.java:2464)
at org.jetbrains.org.objectweb.asm.ClassReader.readUTF8(ClassReader.java:2525)
at org.jetbrains.org.objectweb.asm.ClassReader.readModule(ClassReader.java:761)
.......
是Redux操作,需要执行异步操作并调度其他操作以响应该操作,则存在一个约定,Redux将通过该约定将AllProducts
作为函数参数传递。该动作仅需要返回一个接受该参数的函数。例如:
dispatch
不需要使用挂钩,这仅在React Function组件或其他挂钩(它们本身在React Function组件中使用)内是必需的。