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

Question

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

该页面具有获取博客 ID 的函数post:

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

而且它还有一个react组件，需要从这个函数中取值来取数据。变量在获取请求中 URL.

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 />
        )
        }


    }
  }

如果我把实际的博客 post id，在获取的末尾说'33' URL 它工作正常，但是如果我把一个来自 BlogPost() 函数的变量放在那里它说 'blogId is not defined'.

所以问题是：如何将这个变量传递给组件？

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 })
}

现在抓取 url 会喜欢这个

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

Answer 2

我相信你是从 props 获取 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

尝试从函数 return blogId:

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

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

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

Answer 4

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

import { withRouter } from "react-router";

... 
export default withRouter(Home);

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

如果你使用 react-router v3，那么你可以得到 id 这样的：

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

如果你使用 react router v4 或 v5。您必须安装一些 URL 解析器，例如 query-string 并自行解析 location：

import qs from `query-string`;

....

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

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

How to pass a variable from a function to React component?

reactjs

react-router

next.js