reactjs - 使用 useEffect API 调用，无法从已安装的组件切换到另一条路由

Question

我正在使用 useEffect 调用我的 API，它工作正常，但是当我单击一个Link组件到另一个页面时，我得到：

TypeError: func.apply is not a function

这是我的组件：

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Slide from '@material-ui/core/Slide';
import dummy from '../../dummy';

const useStyles = makeStyles({
  root: {
    width: "90%",
    marginLeft: "auto",
    marginRight: "auto",
    marginTop: "80px",
  },
  container: {
    width: "100%",
    marginTop: "40px",
    display: "flex",
    flexWrap: "wrap",
  },
  card: {
    flex: "20%",
    minWidth: "200px",
    backgroundColor: "#212121",
    marginLeft: "10px",
    marginRight: "10px",
    marginBottom: "20px",
  },
  title: {
    color: "white",
  },
  desc: {
    color: "white",
  },
});

const StackList = () => {
  const classes = useStyles();
  const [displayPosts, setDisplayPosts] = useState([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(async () => {
    const fetchData = async () => {
      const result = await axios(
        'http://192.168.1.17:8000/stacks'
      );
        setDisplayPosts(result.data)
        setIsLoading(false)
    };
    fetchData();
  }, []);


  return(
    <div className={classes.root}>
      <h1 style={{color: "white"}}>Stack Viewer</h1>
      <div className={classes.container}>
        {displayPosts.map(item =>
          <Slide direction="up" in={true} timeout={800}>
            <Card className={classes.card}>
              <CardContent>
                <h2 className={classes.title}>{item.name}</h2>
                <p className={classes.desc}>By {item.author}</p>
              </CardContent>
              <CardActions>
                <Button component={Link} to="stacks/test" size="small" style={{color:"white"}}>View Weapon Stack</Button>
              </CardActions>
            </Card>
          </Slide>
        )}
      </div>
    </div>
  )
}

我正在点击<Button component={Link} to="stacks/test" size="small" style={{color:"white"}}>View Weapon Stack</Button>

我可以从我的兄弟导航栏组件加载其他路线。

如果我用模拟 JSON 响应更改我的 useEffect 调用，一切正常。

我知道这一定是我想念的简单事情，但我不明白为什么会这样。

标签： reactjsreact-hooksreact-router-domuse-effect