ReactuseParams根本不顯示引數，回傳具有許多值的物件

我正在對 App.js 中的一些鏈接進行反應和路由，其中?? 2 個有一個 :id 引數，如下所示

import React from "react";
import "./App.css";
import { BrowserRouter as Route, Switch } from "react-router-dom";
import Home from "./Components/Home";
import NavBar from "./Components/NavBar";
import About from "./Components/About";
import Contact from "./Components/Contact";
import CatsList from "./Pages/CatsList";
import CatsUpdate from "./Pages/CatsUpdate";
import CatsCreate from "./Pages/CatsCreate";
import AuthCatShow from "./Pages/AuthCatShow";
import CatShow from "./Pages/CatShow";

function App() {
  return (
    <div className="App">
      <NavBar />
      <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/cats/:id">
            <AuthCatShow />
          </Route>
          <Route path="/cats/list">
            <CatsList />
          </Route>
          <Route path="/cats/new">
            <CatsCreate />
          </Route>
          <Route path="/cats/edit/:id">
            <CatsUpdate />
          </Route>
      </Switch>
    </div>
  );
}

export default App;

注意帶有 cat/:id 和 cat/edit/:id 的組件需要 id 引數。我嘗試在其中使用 use params，但它不起作用。例如，對于cats/:id，我做了： let id = useParams(); 然后我應該能夠像這樣訪問id：（id.id幾天前它正在作業！）

import axios from "axios";
import React, { useEffect, useState } from "react";
import { BrowserRouter as Link, useParams } from "react-router-dom";
import styled from "styled-components";

const LinkStyled = styled(Link)`
  text-decoration: none;
  color: black;
`;
const Img = styled.img`
  border-radius: 50%;
`;

function AuthCatShow() {
  let id = useParams();
  console.log(id);
  // For the cat data
  const [cat, setCat] = useState();
  const [toggle, setToggle] = useState(false);
  // handle function for adding comment
  const handleComment = (event) => {
    event.preventDefault();
    setToggle(!toggle);
    let text = event.target[0].value;
    let cat_id = id.id;
    let user_id = id.id;
    let email = id.id;

    const payload = { text, cat_id, user_id, email };
    axios
      .post(`http://localhost:3000/api/cats/${id.id}/newcomment`, payload)
      .then((res) => {
        window.alert(`Comment added!`);
      });
  };

  // handle function for updating comment
  const updateComment = async (id) => {
    setToggle(!toggle);
    let updateCommentText = prompt("Update the comment:");

    await axios
      .put(`http://localhost:3000/api/comments/${id}`, {
        text: updateCommentText,
      })
      .then((res) => {
        window.alert(`Comment updated!`);
      });
  };

  // handle function for deleting comment
  const deleteComment = (id) => {
    setToggle(!toggle);
    axios.delete(`http://localhost:3000/api/comments/${id}`);
  };

  // useeffect to get the cats data
  useEffect(() => {
    async function getCatData() {
      await axios.get(`http://localhost:3000/api/cats/${id.id}`).then((cat) => {
        setCat(cat.data.data);
      });
    }
    getCatData();
  }, [updateComment]);

  return (
    <>
      <div>
        <h1>{cat?.name}</h1>
        <Img src={cat?.image} alt={cat?.name} width="400px" height="400px" />
        <p>Description: {cat?.description}</p>
        <p>Gender: {cat?.gender}</p>
        <p>Adoptable: {cat?.adoptable}</p>
        <p>Cage: {cat?.cage}</p>
        <button>
          <LinkStyled to={`/cats/list`}> Back </LinkStyled>
        </button>
      </div>
      <div>
        <h3>Comments</h3>
        {cat?.comments?.map((element) => {
          return (
            <>
              <p key={element._id}>
                <p>
                  {element.text}
                  <button onClick={() => updateComment(element._id)}>
                    &#9998;
                  </button>
                  <button onClick={() => deleteComment(element._id)}>
                    &#128465;
                  </button>
                </p>
                <br />
                <p>Posted by: {element.email}</p>
              </p>
            </>
          );
        })}
        <form onSubmit={handleComment}>
          <input type="text" minLength="3" />
          <button>Add comment</button>
        </form>
      </div>
    </>
  );
}

export default AuthCatShow;

不過，現在，id.id不起作用。作為參考，當我使用 console.log id 時，我得到一個包含許多屬性的物件，如下所示：

我真的很困惑。為什么會這樣？幾天前它正在作業，它是一個內部只有 1 個屬性的物件，允許我在我的代碼中使用“id.id”。任何幫助，將不勝感激！

uj5u.com熱心網友回復：

您不能將 BrowserRouter 用作 Switch 內的 Route 。BrowserRouter 必須在 Switch 之外使用。應該是這樣的。

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/cats/:id">
            <AuthCatShow />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

嘗試這樣使用。它可能會起作用。

uj5u.com熱心網友回復：

老實說，我真的不知道發生了什么，但感謝您的所有評論！有一些路由問題，我沒有更改組件中的任何內容，我只是簡單地編輯了 App.js 中的路由，如下所示：

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./Components/Home";
import NavBar from "./Components/NavBar";
import About from "./Components/About";
import Contact from "./Components/Contact";
import CatsList from "./Pages/CatsList";
import CatsUpdate from "./Pages/CatsUpdate";
import CatsCreate from "./Pages/CatsCreate";
import AuthCatShow from "./Pages/AuthCatShow";
import CatShow from "./Pages/CatShow";

function App() {
  return (
    <div className="App">
      <Router>
        <NavBar />
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/contact">
          <Contact />
        </Route>
        <Switch>
          <Route path="/cats/list">
            <CatsList />
          </Route>
          <Route path="/cats/new">
            <CatsCreate />
          </Route>
          <Route path="/cats/edit/:id">
            <CatsUpdate />
          </Route>
          <Route path="/cats/:id">
            <AuthCatShow />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

現在 useParams 起作用了！

標籤：反应 反应钩子 反应路由器

上一篇：陣列元素反應未定義

下一篇：如何使用reactjs突出顯示texarea文本中最常用的字符？