Question

我有一个名为[id] .js的页面

页面具有获取博客文章ID的功能：

function BlogPost() {
  const router = useRouter()
  const blogId = router.query.id
}

它还具有一个react组件，该组件需要从该函数中获取值以获取数据。该变量在获取请求网址中。

class Home extends React.Component {
    state = {
      post: {},
      isLoaded: false
    };
    componentDidMount() {
      fetch(`http://localhost/wordpress/index.php/wp-json/wp/v2/featured_item/${blogId}`)
        .then(postsResponse => postsResponse.json())
        .then((post) => {
          this.setState({
            post,
            isLoaded: true
          })
        })
    }
    render() {
      const { post, isLoaded } = this.state;
      if(isLoaded){
      return (

        <motion.div initial="initial" animate="enter" exit="exit" variants={portfolioVariants}>
          <Posts post={post}/>
        </motion.div>
      )
        }else{
        return(
          <Loader />
        )
        }


    }
  }

如果我将实际的博客文章ID放在提取URL的末尾说“ 33”，则可以正常工作，但是，如果我在BlogPost（）函数中放置了一个变量，则它说“ blogId未定义”。 / p>

所以问题是：如何将此变量传递到组件中？

UPD

我按照注释中的建议进行操作，只是给出了相同的错误。也许我做错了。

class Home extends React.Component {
    state = {
      post: {},
      isLoaded: false,
      id: blogId
    };
    componentDidMount(blogId) {
      fetch(`http://localhost/wordpress/index.php/wp-json/wp/v2/featured_item/${this.state.id}`)

Answer 1

无法通过功能访问函数变量，因此您需要使用状态来获取此数据在组件范围内的任何位置，或者将您的ID存储在“ this”引用中，例如this.id =“ your id”

BlogPost=()=> {
 const router = useRouter()
 this.setState({id: router.query.id })
}

现在，提取网址会这样

fetch(`http://localhost/wordpress/index.php/wpjson/wp/v2/featured_item/${this.state.id}`)

Answer 2

我相信您是从道具中获取blogId的，请确认吗？

在这种情况下：

componentDidMount() {
      fetch(`http://localhost/wordpress/index.php/wp-json/wp/v2/featured_item/${this.props.blogId}`)
        .then(postsResponse => postsResponse.json())
        .then((post) => {
          this.setState({
            post,
            isLoaded: true
          })
        })
    }

Answer 3

尝试从函数中返回blogId：

function BlogPost() {
  const router = useRouter()
  const blogId = router.query.id
  return blogId
}

然后在BlogPost()中调用函数fetch：

fetch(`http://localhost/wordpress/index.php/wp-json/wp/v2/featured_item/${BlogPost()}`)

Answer 4

useRouter-是一个钩子。您的Home组件-是一个类组件。您不能在类组件中使用钩子，而只能在功能中使用钩子。因此，如果您需要从类组件中的查询字符串（在您的情况下为id）中获取一些查询参数，则必须用Home HOC来包装withRouter：

import { withRouter } from "react-router";

... 
export default withRouter(Home);

然后您将可以访问路由器数据。

如果您使用react-router v3，则可以像这样获得id：

const {id} = this.props.location.query;

如果您使用React Router v4或v5。您必须安装query-string之类的URL解析器并自己解析location：

import qs from `query-string`;

....

const { id }  = qs.parse(this.props.location.search);

如何将变量从函数传递到React组件？

4 个答案: