React 路由器/钩子的问题答案

【问题标题】：Problems with React Router/HoookReact 路由器/钩子的问题
【发布时间】：2020-08-18 14:33:13
【问题描述】：

更新（新变化）： 所以现在我几乎将我的代码转换为一个功能组件，但是好像没有从 API 返回，或者我没有正确“安装”？我收到错误“TypeError：无法读取未定义的属性'map'”，这意味着没有返回任何内容，但我不知道为什么。帮忙？

旧帖（我之前曾尝试在类组件中使用钩子）：

我对反应非常陌生，最近我在尝试通过点击卡片媒体（使用材料 ui）导航到页面时遇到此错误。因此，我几乎按照说明将路径推送到我想要通过一个函数导航到的页面的历史记录，并在我单击媒体卡时调用该函数。下面是我的代码和我得到的错误。你知道我为什么会遇到这个问题吗？

我的更新代码

import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import {getItems} from "../Network/network_utility";
import {useHistory} from "react-router-dom";
import {makeStyles} from '@material-ui/core/styles';
import React, {useState, useEffect} from "react";


const useStyles = makeStyles(theme => ({
    icon: {
        marginRight: theme.spacing(2),
    },
    heroContent: {
        padding: theme.spacing(8, 0, 6),
    },
    cardGrid: {
        paddingTop: theme.spacing(6),
        paddingBottom: theme.spacing(3),
        position: "fixed"
    }
}));

export default function Items() {

    let history = useHistory();
    const classes = useStyles();

    const useFeaturedItems = () => {
        const [featured_items, setFeaturedItems] = useState([]);
        useEffect(() => {
            getItems(1).then(response => setFeaturedItems(response["data"]))}, []);
        return featured_items;
    };

    return (
        <div>
            <Container className={classes.cardGrid} maxWidth="lg">
                <Grid container spacing={6}>
                    {useFeaturedItems().map((card, index) => (
                        <Grid item key={index} xs={16} sm={4} md={2}>
                            <Card raised={false} style={{height: "30vh", width: "20vh"}}>
                                <CardMedia
                                    component="img"
                                    src={card["thumbnail"]}
                                    style={{height: "25vh", width: "20vh"}}
                                    onClick={history.push("/item")}
                                >
                                </CardMedia>
                                <div style={{paddingLeft: "10px", paddingTop: "10px"}}>
                                    <text style={{
                                        whiteSpace: "nowrap",
                                        overflow: "hidden",
                                        display: "block",
                                        textOverflow: "ellipsis"
                                    }}>
                                        {card["title"]}
                                    </text>
                                </div>
                            </Card>
                        </Grid>
                    ))}
                </Grid>
            </Container>
        </div>
    );
}

【问题讨论】：

您正在使用基于类的组件，但挂钩仅在功能组件中受支持。我希望你在使用钩子之前已经阅读了文档。

标签： javascript reactjs react-router material-ui react-hooks

【解决方案1】：

我可以看到您在类组件中使用钩子。这是不可能的

how use hook

你不能在类组件中使用 Hooks，但你绝对可以将类和函数组件与 Hooks 混合在一个树中。组件是使用 Hooks 的类还是函数是该组件的实现细节。从长远来看，我们希望 Hooks 成为人们编写 React 组件的主要方式。

在类组件中，您需要使用 HOC withRouter。之后，您可以使用 this.props.history 通过 props 访问历史记录

【讨论】：