Как передать переменную из функции в компонент React? - PullRequest
Новая
       25

Как передать переменную из функции в компонент React?

0 голосов
/ 19 октября 2019

У меня есть страница с именем [id] .js

На странице есть функция, которая получает идентификатор сообщения в блоге: 

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

И она также имеет компонент реагирования,который должен получить значение из этой функции для извлечения данных. Переменная находится в 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 />
        )
        }


    }
  }

Если я добавлю фактический идентификатор сообщения в блоге, говоря «33» в конце URL-адреса выборки, он будет работать нормально, но если я добавлю туда переменную изфункция BlogPost (), в которой говорится «blogId не определен».

Итак, вопрос в том, как передать эту переменную в компонент?

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

Ответы [ 4 ]

0 голосов
/ 19 октября 2019

useRouter - это крюк. Ваш Home компонент - это компонент класса. Вы не можете использовать хуки в компонентах класса, только в функционале. Поэтому, если вам нужно получить какой-либо параметр запроса из строки запроса в компоненте класса (id в вашем случае), вам нужно обернуть Home с помощью withRouter HOC: 

import { withRouter } from "react-router";

... 
export default withRouter(Home);

Тогда выполучит доступ к данным маршрутизатора.

Если вы используете реагирующий маршрутизатор v3, то вы можете получить id, например: 

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

Если вы используете реагирующий маршрутизатор v4 или v5. Вам нужно установить какой-то анализатор URL, например строку запроса и выполнить синтаксический анализ location самостоятельно: 

import qs from `query-string`;

....

const { id }  = qs.parse(this.props.location.search);
0 голосов
/ 19 октября 2019

Я полагаю, что вы получаете 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
          })
        })
    }
0 голосов
/ 19 октября 2019

Попробуйте вернуть blogId из функции: 

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

Затем вызовите функцию BlogPost() in fetch: 

fetch(`http://localhost/wordpress/index.php/wp-json/wp/v2/featured_item/${BlogPost()}`)
0 голосов
/ 19 октября 2019

Функциональная переменная недоступна вне функции, поэтому вам нужно либо использовать состояние для получения этих данных где-либо в области видимости компонента, либо сохранить свой идентификатор в «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}`)
...