Question

你好，我在实现中在组件中使用样式时遇到问题：

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

我的代码：

import React, { Component } from 'react'
import './style.css'
import {connect} from 'react-redux'
import  {fetchProduct} from '../../store/actions/productsFetch';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
const useStyles = makeStyles({
  card: {
    maxWidth: 345,
  },
});
class Description extends Component {

    componentDidMount() {
        this.props.fetchProduct();
      }

    render() {
      const classes = useStyles();
        return (         
            <div>
  <Card className={classes.card}>
      <CardActionArea>
        <CardMedia
          component="img"
          alt="Contemplative Reptile"
          height="140"
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            Lizard
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
            across all continents except Antarctica
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary">
          Share
        </Button>
        <Button size="small" color="primary">
          Learn More
        </Button>
      </CardActions>
    </Card>
          </div>
        )
    }
}
const mapStateToProps = (state) => {
    return{
        products: state.data.filteredProducts,
        loading: state.data.loading,
        error: state.data.error
    }
  };
  const mapActionsToProps = {
    fetchProduct: fetchProduct
};
export default connect(mapStateToProps, mapActionsToProps)(Description);

在这些组件的一部分中，我需要从商店中获取状态数据，但是我不知道如何解决此问题

用materialize.ui反应js redux

0 个答案: