javascript - 使用高阶组件的 this.props 在 componentDidUpdate() 内已过时

Question

我有一个更高阶的组件，它设置一些值，然后将这些值作为 Prop 传递给wrappedComponent，但是在该包装组件中，当我从 componentDidMount() 访问“this.props”时，值是空白的。如果我将渲染方法中的日志“this.props”放置在wrappedComponent中，我会得到所需的结果，尽管我认为这是因为重新渲染。我在这里做错了什么？

Home.js

import React, { Component } from 'react'
// eslint-disable-next-line
import { BrowserRouter as Router } from 'react-router-dom'
import { Route, Switch } from 'react-router-dom'

import BlogSummaryContainer from './utility/BlogSummaryContainer'
import BlogPost from './utility/BlogPost'
import EditableBlogPost from './utility/EditableBlogPost'

function withBlogPostData (WrappedComponent) {
  return class BlogPostContainer extends React.Component {
    constructor () {
      super()
      this.state = { title: '', content: '', catchPhrase: '' }
    }

    componentDidMount () {
      fetch(`/api/posts/${this.props.match.params.id}`)
        .then(res => {
          return res.json()
        })
        .then(blogPost => {
         // this setState doesnt reach the wrappedComponent in time even if i dont do a fetch and simply hard code a value, whats going on?
          this.setState({
            title: blogPost.title,
            content: blogPost.content,
            catchPhrase: blogPost.catchPhrase
          })
        })
    }

    render () {
      return (
        <WrappedComponent
          id={this.props.match.params.id}
          title={this.state.title}
          content={this.state.content}
          catchPhrase={this.state.catchPhrase}
        />
      )
    }
  }
}

class Home extends Component {
  ... other code

  render () {
    return (
      <Switch>
        <Route
          exact
          path={`${this.props.match.url}`}
          render={() => {
            return <BlogSummaryContainer posts={this.state.blogPosts} />
          }}
        />
        <Route
          exact
          path={`${this.props.match.url}/:id`}
          component={withBlogPostData(BlogPost)}
        />
        <Route
          exact
          path={`${this.props.match.url}/:id/edit`}
          component={withBlogPostData(EditableBlogPost)}
        />
        <Route
          exact
          path={`${this.props.match.url}/new/post`}
          render={() => {
            return <EditableBlogPost isNew />
          }}
        />
      </Switch>
    )
  }
}

export default Home

可编辑BlogPost.js

  componentDidMount (props) {
    const { title, catchPhrase, content } = this.props
    console.log('this.props', this.props) // this.props = {title: "", content: "", ... }
  }

Answer 1

我认为这只是一个异步问题 - 当你的 HOC 安装时，它正在调用 fetch() ，但它不会立即解决，所以这就是为什么在第一次渲染 this.state 时。 x 是它们的初始空值。

当 Promise 得到解决时，值就会被设置，后续的渲染将具有预期的值。

您可以有条件地渲染，以避免在 fetch() 解析之前渲染包装的组件:

render () {
  if(this.state.title.length === 0) {
    return <div>Loading...</div>; //or some nice <Loading> component
  }

  return (
    <WrappedComponent
      id={this.props.match.params.id}
      title={this.state.title}
      content={this.state.content}
      catchPhrase={this.state.catchPhrase}
    />
  )
}