Блог

В моем приложении React мне нужен идентификатор пользователя в классе Timeline, чтобы получать сообщения от пользователя, но React говорит, что он не определен.

Если я скажу в отображаемой части

{ this.props.id }

Тогда он покажет правильный идентификатор..

Я уже перепробовал все решения, которые мог найти в Интернете.

 import React, { Component } from 'react'
import axios from 'axios'
import Timeline from './Timeline'

class Profile extends Component{
    state = {
        user: {}
    }

    componentDidMount() {
        axios.get(`http://localhost:8090/user/${this.props.match.params.id}`)
          .then(res =>{
            const user = res.data
            this.setState({ user: user })
        })
    }

    render(){
    return(
        <div>
            <h1>This is the profile page of { this.state.user.username }.</h1>
            <img src={this.state.user.profilePicture} ></img>
            <h3> E-mailaddress: { this.state.user.mail }</h3>
            <Timeline id={this.state.user.id}/>
        </div>
    )}
}

export default Profile
  

 import Cookies from 'universal-cookie'
import React, { Component } from 'react'
import axios from 'axios'

const cookies = new Cookies()

class Timeline extends Component {

  state = {
    user: cookies.get('user'),
    posts: []
  }

  componentDidMount() {
    const id = this.props.id
    console.log("ID IS "   id)
    if (this.state.user === undefined)
      return



    axios.get(`http://localhost:8090/user/${id}/postEntities`)
    .then(response => {
      this.setState({
        posts: response.data._embedded.post
      })
    })
    .catch(error => {
      console.log(error)
    })
  }

  render() {
    if (this.state.user !== undefined) {
      if (this.state.posts.length <= 0) {
        return (
          <main>
            <h2>Personal timeline</h2>
            <h2>This id works: { this.props.id }</h2>
            <h6>There does not seem to be anything here..<br />Create a post and come back later!</h6>
          </main>
        )
      } else {
        return (
          <main>
            <h2>Personal timeline</h2>
            {
              this.state.posts.map(post => {
                return (
                  <div>
                    <h5>{ post.title }</h5>
                    <img src={post.pictureUrl} width="200" height="200"></img>
                    <p><i>You took this picture at { post.longitude }, { post.latitude }</i></p>
                  </div>
                )
              })
            }
          </main>
        )
      }
    }
    else {
      return (
        <h5>You need to be logged in to use this feature</h5>
      )
    }
  }
}

export default Timeline
  

Ожидаемый результат в URL должен быть 2, но не определен, ожидаемое значение в отображаемой части равно 2, и оно выводит 2.

С помощью react дочерний компонент componentDidMount вызывается перед компонентом от родительского компонента.

Итак, когда componentDidMount временной шкалы вызывается в первый раз, componentDidMount Profile не был вызван, поэтому идентификатора пользователя еще нет.

Чтобы избежать этой проблемы, вы должны отображать временную шкалу только тогда, когда компонент профиля смонтирован и когда у вас есть свой идентификатор пользователя.

Итак, что-то подобное в рендеринге профиля

 render(){
return(
    <div>
        <h1>This is the profile page of { this.state.user.username }.</h1>
        <img src={this.state.user.profilePicture} ></img>
        <h3> E-mailaddress: { this.state.user.mail }</h3>
        {this.state.user.id amp;amp; (
            <Timeline id={this.state.user.id}/>
        )}
    </div>
)}
  

Потому что

this.state.user.id

имеет значение только тогда, когда функция axios.get в componentDidMount выполнена. в то время как функция render() вызывалась раньше.

Итак, чтобы избежать undefined, вы должны установить состояние с помощью format:

 state = {
    user: {id : 0} //or null
}
  

Изначально у вас не будет user.id он поступает из вызова службы axios. В этом случае подождите, пока не получите ответ, а затем покажите временную шкалу на основе условия при рендеринге.

 import React, { Component } from 'react'
import axios from 'axios'
import Timeline from './Timeline'

class Profile extends Component{
    state = {
        user: {}
    }

    componentDidMount() {
        axios.get(`http://localhost:8090/user/${this.props.match.params.id}`)
          .then(res =>{
            const user = res.data
            this.setState({ user: user })
        })
    }

    render(){
    return(
        <div>
            <h1>This is the profile page of { this.state.user.username }.</h1>
            <img src={this.state.user.profilePicture} ></img>
            <h3> E-mailaddress: { this.state.user.mail }</h3>
            {typeof(this.state.user.id) !== 'undefined' ? <Timeline id={this.state.user.id}/> : ''}
        </div>
    )}
}

export default Profile 
  

Какая переменная не определена? this.state.user.id ?

Если это так, это, вероятно, означает, что вы начинаете с user: {} , затем даете обещание, а затем устанавливаете состояние. Проблема в том, что для выполнения обещания потребуется время, поэтому пока вы все еще используете user: {} и this.state.user.id выдает undefined.

При вызове <Timeline id={this.state.user.id}/> убедитесь, что у вас есть идентификатор и электронная почта в вашем штате. Или определите свое состояние с помощью user: {is: '', email:''} или выполните условный рендеринг. Надеюсь, я правильно понял вашу проблему!