reactjs useParams钩子返回react函数组件中未定义的值

3qpi33ja 于 2022-12-22 发布在 React

关注(0)|答案(4)|浏览(171)

该应用程序显示所有照片<Photo>在一个网格<PhotoGrid>，然后一旦点击，<Photo>中的一个函数改变URL与history.push，路由器渲染<Single>基于URL使用useParams挂钩。
PhotoGrid-〉Photo（点击改变URL）-〉Single基于URL（useParams）.我一定是搞砸了什么，因为useParams返回undefined.
感谢您在advanced. App.js中的所有想法

class App extends Component {
  render() {
    return (
      <>
        <Switch>
          <Route exact path="/" component={PhotoGrid}/>
          <Route path="/view/:postId" component={Single}/>
        </Switch>
      </>
    )
  }
}
export default App;

Photogrid.js

export default function PhotoGrid() {
    const posts = useSelector(selectPosts);

    return (
        <div>
            hi
            {/* {console.log(posts)} */}
            {posts.map((post, i) => <Photo key={i} i={i} post={post} />)}
        </div>
    )
}

在照片中，我用历史记录更改URL。

const selectPost = () => {
  (...)
  history.push(`/view/${post.code}`);
  };

Single.js

import { useParams } from "react-router-dom";
export default function Single() {
    let { id } = useParams();
    console.log("id:",  id)   //returns undefined

    return (
      <div className="single-photo">
       the id is: {id} //renders nothing
      </div>
    )
}

reactjs

来源：https://stackoverflow.com/questions/66506891/useparams-hook-returns-undefined-in-react-functional-component

4条答案

按热度按时间

sy5wg1nm1#

使用useParams时，必须将析构let { postId } = useParams();与路径"/view/:postId"匹配。
工作单身. js

import { useParams } from "react-router-dom";

export default function Single() {
    const { postId } = useParams();
    console.log("this.context:",  postId )

    return (
      <div className="single-photo">
        {/* render something based on postId */}
      </div>
    )
}

赞(0）回复(0）举报 2022-12-22

eyh26e7m2#

你应该使用和Route路径中提到的相同的解构。在这种情况下，你应该写：

let { postID } = useParams();

我将提到另外两个错误，有人可能会犯，并面临同样的问题：
1.您可以使用路由器组件代替路由组件。
1.您可能会忘记在Route组件的path属性中提到该参数，而您可能会在Linkto组件中提到它。

赞(0）回复(0）举报 2022-12-22

px9o7tmv3#

确保调用useParams()的组件确实是<Route>的子组件
当心ReactDOM.createPortal

const App = () => {
    return (
      <>
        <Switch>
          <Route exact path="/" component={PhotoGrid}/>
          <Route path="/view/:postId" component={Single}/>
        </Switch>
       <ComponentCreateWithPortal /> // Impossible to call it there
      </>
    )
}

赞(0）回复(0）举报 2022-12-22

pkwftd7m4#

你必须检查你正在使用的API。有时候它不仅仅被调用id。这就是为什么useParams（）看不到它

赞(0）回复(0）举报 2022-12-22