无效的挂钩调用.反应钩子

Question

错误：

错误：挂钩调用无效。钩子只能在身体内部调用 函数组件。以下情况之一可能会发生这种情况 原因

您好，我正在尝试在我的操作中使用useDispatch，但它从无效的hoook生成此错误

我解决不了

有人可以帮助我吗？

我的操作

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>
);
}

Answer 1

基于上面的评论：

所有产品都是我的行动

如果AllProducts是需要执行异步操作并调度其他操作以响应该操作的 Redux 操作，则 Redux 可以通过该约定将dispatch作为函数参数传递。 该操作只需要返回一个接受该参数的函数。 例如：

export default function AllProducts () {
return function(dispatch) {
dispatch(isLoadingFetch());
// fetching data
api.get('/products')
.then( response => { dispatch(FetchSucess(response.data))})
.catch( err => { dispatch(FetchFailed(err.message));});
}
}

没有必要使用钩子，这只在 React 函数组件或其他钩子(它们本身在 React 函数组件中使用(中是必需的。