Реагировать this.props.id не определено в части класса

Question

В моем приложении React мне нужен userId в классе 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.

Answer 1

С реакцией componentDidMount дочерних элементов называется ДО одного из родительских.

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

Чтобы избежать этой проблемы, вы должны отображать временную шкалу только тогда, когда компонент 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 && (
            <Timeline id={this.state.user.id}/>
        )}
    </div>
)}

Answer 2

Потому что

this.state.user.id

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

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

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

Answer 3

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

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

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

Answer 4

Изначально у вас не будет 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