console.log（this.props）之后的console.log（this）不顯示相同的公共值

Question

一切都在標題中。 我正在使用：“反應”：“16.8.6”
console.log（this）顯示了很好的信息

以下行：console.log（this.props）顯示的不是與console.log（this）中的數據不同的預期數據

插件React開發工具給了我與console.log相同的好信息（這個）
兩種情況都不一樣“這個”？ 這怎么可能？

Answer 1

這是我的代碼。 你可以在getPost方法中指向console.log（this.props）！

import React from 'react'
import { Container, Row, Col, Alert } from 'reactstrap'

const Api = require('../lib/Api.js')

class PageComponent extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      page: {
        id: props.match.params.id,
        content: ''
      },
      loading: true,
      flashMessage: {
        message: undefined,
        style: 'success'
      }
    }

  }

  render() {
    if (this.state.loading) {
      return null
    }

    return (
      <Container>
        <Row>
          <Col xs="12" md="12">

            {this.state.flashMessage.message &&
              <Container>
                <Row>
                  <Col xs="12" md="12">
                    <Alert color={this.state.flashMessage.style}>
                      {this.state.flashMessage.message}
                    </Alert>
                  </Col>
                </Row>
              </Container>
            }

            <div>{this.state.page.content}</div>

          </Col>
        </Row>
      </Container>
    )
  }

  componentDidMount() {
    this.getPage()
  }

  componentWillReceiveProps(nextProps) {

    let prevPageId = this.props.match.params.id
    let newPageId = nextProps.match.params.id

    // check if page component is being reloaded with new page props && reload page from Api
    if (prevPageId !== newPageId) {
      this.setState({
        page: {
          id: newPageId,
          content: ''
        }
      })
      this.getPage(newPageId)
    }
  }

  getPage(pageId = null) {
    pageId = pageId || this.state.page.id

    this.setState({
      loading: true,
      flashMessage: {
        message: undefined,
        style: 'success'
      }
    })
    console.log("from Page1")
    console.log(this)
    console.log(this.props)
    console.log(this.state)
    let jwt = this.props.appState.jwt
    console.log(jwt)

    Api.getPage(jwt, pageId).then(response => {
      if (response) {
        this.setState({
          page: response,
          loading: false
        })
      }
      else {
        this.setState({
          loading: false,
          flashMessage: {
            message: 'Access Denied.',
            style: 'danger'
          }
        })
      }
    })
  }



}

export default PageComponent

在console.log（這個）的控制台中，我得到了：
PageComponent {props：{...}，context：{...}，refs：{...}，updater：{...}，state：{...}，...}
上下文：{}
道具：
APPSTATE：
cookieName：“rails-react-token-auth-jwt”
電子郵件：“eric.london@example.com”
智威湯遜：
“eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NTkzODI3MTAsInN1YiI6MX0.hMSIIHK6jl3ftEkTCfbuVtgiUKjt-8dsfR2U-VAUjec”
頁數：（4）[{...}，{...}，{...}，{...}]
user_id：1

在console.log（this.props）的控制台中，我得到了：
APPSTATE：
cookieName：“rails-react-token-auth-jwt”
電子郵件：undefined
jwt：undefined
頁：[]
user_id：undefined

Answer 2

好的...以前的代碼不是我的，來自：
https://github.com/EricLondon/Rails5-React-Token-Auth
我必須說代碼正在使用舊庫
我做了一些重構，因為我不再相信JS的“這個”！
使用鈎子和函數只有代碼更可重復，71行而不是116行！ 我賣了....
新的重構代碼：

import React, { useState, useEffect } from 'react'
import { Container, Row, Col, Alert } from 'reactstrap'

const Api = require('../lib/Api.js')

export default function PageComponent(props)  {

  //states init n Hooks
  const [page, setPage] = useState({ id: props.match.params.id, content: ''})
  const [loading, setLoading] = useState(true)
  const [flashMessage, setFlashMessage] = useState({ message: undefined, style: 'success'})
  console.log(page.id)

  useEffect( () => {
    const pageId = props.match.params.id
    const getPage = () => {
      setLoading(true)
      setFlashMessage({
        message: undefined,
        style: 'success'
      })
      let jwt = props.appState.jwt
      console.log(jwt)

      Api.getPage(jwt, pageId).then(response => {
        if (response) {
          setPage(response)
          setLoading(false)
        }
        else {
          setPage({id:pageId, content: ''})
          setLoading(false)
          setFlashMessage({
            message: 'Access Denied.',
            style: 'danger'
          })
        }
      })
    }
    getPage()
  },[ props ])

  //rendering:

  if (loading) {
    return <div>Loading</div>
  }
  else {
    return (
      <Container>
        <Row>
          <Col xs="12" md="12">

            {flashMessage.message &&
              <Container>
                <Row>
                  <Col xs="12" md="12">
                    <Alert color={flashMessage.style}>
                      {flashMessage.message}
                    </Alert>
                  </Col>
                </Row>
              </Container>
            }

            <div>{page.content}</div>

          </Col>
        </Row>
      </Container>
    )}
}