Реагировать - Использование реквизита вне Render

Question

Я пытаюсь разместить UserId в базе данных, но Id передается как реквизит.Когда я ввожу this.props.userId в метод рендеринга, он отображает желаемую информацию, однако, когда я пытаюсь включить ее в функцию выше функции рендеринга, я получаю нулевое значение.Я провел часы, просматривая другие сообщения и пробуя то, что мне кажется, безуспешно.

Код App.js

import axios from 'axios'
import {
  BrowserRouter as Router,
  Route,
  Redirect,
} from 'react-router-dom'
import Home from "./pages/Home";
import MyEvents from "./pages/MyEvents"
import Signup from "./pages/Signup";
import Login from "./pages/Login";
import Navbar from "./components/Navigation/Navigation";
import "./App.css"


class App extends Component {
  constructor() {
    super()
    this.state = {
      loggedIn: false,
      username: null,
      userId: null,
    }

    this.getUser = this.getUser.bind(this)
    this.componentDidMount = this.componentDidMount.bind(this)
    this.updateUser = this.updateUser.bind(this)
  }

  componentDidMount() {
    this.getUser()
  }

  updateUser (userObject) {
    this.setState(userObject)
  }

  getUser() {
    axios.get('/api/users/').then(response => {
      console.log('Get user response: ')
      console.log(response.data)
      if (response.data.user) {
        console.log('Get User: There is a user saved in the server session: ')

        this.setState({
          loggedIn: true,
          username: response.data.user.username,
          userId: response.data.user._id
        })
      } else {
        console.log('Get user: no user');
        this.setState({
          loggedIn: false,
          username: null,
          userId: null
        })
      }
    })
  }

  render() {
    return (
      <div className="App">

        <Navbar updateUser={this.updateUser} loggedIn={this.state.loggedIn} />
        {/* greet user if logged in: */}
        {this.state.loggedIn &&
          <p>You are logged in, {this.state.username}, userId: {this.state.userId}!!!!</p>
        }
        {/* Routes to different components */}
        <Route
          exact path="/home"
          render = {() => 
            <Home userId = {this.state.userId} />
          }
          />

Код Home.js

import React, { Component } from "react";
import API from "../utils/API";
class Events extends Component {
  state = {
    events: [],
    search: "",
    selector: "",
    input:""
    };


  attendEvent = show => {
    API.attendConcert({
      userId: this.props.userId,
      concertId: show.id,
      artist: show.performance[0].artist.displayName,
      venue: show.venue.displayName,
      date: show.start.date,
      time: show.start.time,
      city: show.venue.metroArea.displayName,
      latitude: show.venue.lat,
      longitude: show.venue.lng,
    })
    .then(res => window.location.href = "/concerts/" + res.data._id)
    .catch(err => console.log(err))
  }

  handleRadioChange = event => {
    this.setState({
      selector: event.target.value
    });
  }


  render() {
    return (<>
      <Container>
        <Row>
          <Col size="md-12">
<p>Hi {this.props.userId}</p>

Код API.JS

import axios from "axios";

export default {
    attendConcert: function(eventData) {
        return axios.post("/api/concerts", eventData);
    },
    getConcert: function(id) {
        return axios.get("/api/concerts/" + id);
    }
}

Примечание: некоторые строки кода были удалены, чтобы уменьшить объем представляемого кода, но если кто-то захочет увидеть все, пожалуйста, дайте мне знать.

Answer 1

Вы можете попробовать вызвать функцию из componentDidMount ().Как все асинхронно.Ваше состояние не установлено в родительском компоненте и используется в дочернем как подпорки.Я тоже столкнулся с той же проблемой.Реквизит отображается в render () дочернего элемента, но не где-либо еще.

ИЛИ

Вы также можете использовать localStorage.

ИЛИ

Попробуйте ввести нулевое значениепроверьте перед маршрутизацией к домашнему компоненту.

   {this.state.userId ?
   <Route
      exact path="/home"
      render = {() => 
        <Home userId = {this.state.userId} /> : null}

Answer 2

Это проблема области действия:

API.attendConcert({
      userId: this.props.userId,
      concertId: show.id,
      artist: show.performance[0].artist.displayName,
      venue: show.venue.displayName,
      date: show.start.date,
      time: show.start.time,
      city: show.venue.metroArea.displayName,
      latitude: show.venue.lat,
      longitude: show.venue.lng,
    })

this в этом контексте ссылается на создаваемый вами литерал объекта, а не на компонент.

Объявите переменную для хранениязначение userId, затем используйте это значение в литерале объекта, например:

const userId = this.props.userId
API.attendConcert({
     userId: userId,
      concertId: show.id,
      artist: show.performance[0].artist.displayName,
      venue: show.venue.displayName,
      date: show.start.date,
      time: show.start.time,
      city: show.venue.metroArea.displayName,
      latitude: show.venue.lat,
      longitude: show.venue.lng,
    })

Answer 3

Как прокомментировал Binod, вы получаете userId: null, так как вы изначально устанавливаете его в null в своем состоянии, и ваш код выполняется до того, как вызов API в app.js успеет вернуться из-за асинхронных функций.Я рекомендую взглянуть на этот ресурс на Асинхронный Javascript .

Ваши реквизиты <Home /> компонента обновятся, когда вы получите ответ, и будут переданы, так что вам нужно сделатьубедитесь, что attendEvent() не вызывается до передачи userId.Ваш текущий код не показывает, как это вызывается в данный момент, но я бы предположил, что это в другом componentDidMount.Попробуйте вместо этого использовать componentDidUpdate() и проверить, если props.userId !== null, тогда вызовите API attendConcert.

Надеюсь, это немного поможет, и если у вас есть еще вопросы, дайте мне знать!