时间戳

首页 > 解决方案 > React 路由器/挂钩的问题

javascript - React 路由器/挂钩的问题

问题描述

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

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

我对反应非常陌生，最近我在尝试通过点击卡片媒体（使用材料 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>
    );
}

标签： javascriptreactjsreact-routermaterial-uireact-hooks

解决方案

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

钩子怎么用

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

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

推荐阅读