当试图获得我的useparams（）的价值时，我会变得不确定。

Question

使用UseParams（）挂钩时，我正在遇到一些问题。

我有4个组件：

app.js，midlocal.js，blogposts.js和blogsingle.js，

我在app.js中设置了路由，

<Route path='/posts/:id' element={<PostSingle />} />

在midlocal.jsx sill中进行了API呼叫

  const MidLocal = () => {
  const [post, setPost] = useState([]);
  


  async function fetchPosts() {
    const response = await fetch("https://khg.com.ng/wp-json/wp/v2/posts")
    const data = await response.json();

    setPost(data);
      

  };

  useEffect(() => {
    fetchPosts();
  }, []);

然后我在同一中局部组件中 ，我正在使用array.map（）并将数据传递给组件，

<div className="mid__blog__posts">
          {post.map((item) => (
            <BlogPosts
              key={item.id}
              postId = {item.id}
              title={item.title.rendered}
              date={item.date}
              img={item.img}
            />
          ))}
        </div>

这是Blogpost组件。只是一个简单的功能组件，可以按照我喜欢的方式来安排我的数据，并使用React路由器的链接功能使用其属性来指向单个博客页面/组件

const BlogPosts = ({postId, date, title, img}) => {
  
  return (
    <div className='post__container'>
                    <div className='post__texts'>
                        <small className='md__post__date'>{date}</small>
                        <Link to={`/posts/${postId}`}><h3 className='md__post__title'>{title}<span className='post__url__icon'><BsFillArrowRightCircleFill /></span></h3></Link>
                    </div>
      
                    <img src={img} alt={title} className='post__img'/>
                </div>
  )
}

export default BlogPosts

，然后在博客单个组件中，

const BlogSingle = () => {
  const [content, setContent] = useState([]);

  const {postId} = useParams();

  

  console.log(postId)

  async function fetchPostContent() {
    const response = await fetch(`https://khg.com.ng/wp-json/wp/v2/posts/${postId}`)
    const data = await response.json();

    setContent(data);
      
  };

  useEffect(() => {
    fetchPostContent();
  }, []);

console.log（PostID）给出。我不确定

，试图访问邮政的价值也使我不确定

<h1>{postId}</h1>

Answer 1

您需要相应地将ID命名。您将其命名为ID，然后尝试以postid访问它。要么重命名包含/posts/：postid的路径路径，要么在您的blogpost中使用它作为id：const {id} = useparams（）;

Answer 2

只需破坏ID并将其重命名为PESTID，请参见以下代码以获取快速参考！

const BlogSingle = () => {
  const [content, setContent] = useState([]);

  const {id: postId} = useParams();

  

  console.log(postId)

  async function fetchPostContent() {
    const response = await fetch(`https://khg.com.ng/wp-json/wp/v2/posts/${postId}`)
    const data = await response.json();

    setContent(data);
      
  };

  useEffect(() => {
    fetchPostContent();
  }, []);

Answer 3

let { id: postId } = useParams();