我正在尝试学习 React Hooks，因为它似乎是事情未来发展的方向，我想与时俱进。我已经研究了几个小时，试图弄清楚到底发生了什么。在 React Dev Tools 中，我甚至没有看到任何组件，这让我相信我显然是无能的，没有在代码中正确传递某些内容。我真的尽了最大的努力重新开始，我已经用尽了 YouTube、谷歌和 Stack Overflow 文章上的资源。我现在已经不知所措，崩溃了，求助哈哈。

问题：

我正尝试使用简单的 GET by ID 请求从后端获取一项任务。错误消息是：TypeError：无法读取未定义的属性“params”。

我的代码：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function SingleTask (props) {
//Setting state
const initialTaskState = {
    _id: "",
    title: "",
    created_by: "",
    description: "",
    __v: 0
}

const [singleTask, setTask] = useState(initialTaskState)

//Axios GEt request to pull by ID from the DB
const fetchSingTask = (id) => {
    axios.get(`/api/tasks/${id}`, id)
    .then((res) => {
        setTask(res.data)
        console.log(res.data)
    })
    .catch (err => {
        console.log(err)
    })
}

useEffect(() => {
    fetchSingTask(props.match.params.id)
}, [props.match.params.id]) 

return(
    <div>
        <h1>
            {singleTask.title}
        </h1>
    </div>
)
}

export default SingleTask;

我尝试了多种方式来传递 ID，但似乎都没有用。我真的很困惑，如果大家能给我一些见解，我将不胜感激。我非常有信心，如果我能让它工作起来，我就能搞清楚 PUT 和 DELETE。我可以使用类组件轻松完成这项工作，但总的来说，我对这个还很陌生，如果大家能给我一些见解，我将不胜感激。

编辑 App.js：

import './App.css';
import AllTasks from './components/AllTasks';
import AddTask from './components/AddTask';
import SingleTask from './components/SingleTask';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';


function App() {

  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/">
            <AllTasks />
          </Route>
          <Route exact path="/create">
            <AddTask />
          </Route>
          <Route exact path="/task/:id">
            <SingleTask />
          </Route>
        </Switch>
      </div>
    </Router>
  )
}

export default App;