无效的挂接调用。反应钩子

时间:2019-12-08 14:03:41

标签: react-hooks

错误:

  

错误:无效的挂接调用。挂钩只能在身体内部使用   功能组件。可能发生以下情况之一   原因

您好,我尝试在操作中使用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>
        );
    }

1 个答案:

答案 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组件中使用)内是必需的。