reactjs - 在React中将API数据从父容器传递到子组件

Question

我有一个包含许多子组件的 React 容器。其中之一应该是一个模式，它将向用户显示他们的名字，该名字是从父容器中的用户数据 api 中获取的。我应该能够使用 prop 将用户数据传递给子级，但必须缺少某些内容，因为显示名称不会作为值显示在输入中。

父容器

class ParentContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      displayName: this.state.user.displayName
    }
    this.config = this.props.config
  }

  async componentDidMount () {
    try {
      const userData = await superagent.get(`/api/user`)
      await this.setState({ user: userData.body })
      console.log(userData.body.displayName) <===logs out user display name
    } catch (err) {
      console.log(`Cannot GET user.`, err)
    }
  }

  render () {
    return (
      <div className='reviews-container'>
        <ReviewForm
          config={this.config} />

        <ReviewList
          reviews={reviews}
          ratingIcon={this.ratingIcon}
        />
        <DisplayNameModal
          config={this.config}
          displayName={this.displayName} />
      </div>
    )
  }
}

export default ParentContainer

子组件

 class DisplayNameModal extends React.Component {
  constructor (props){
    super(props)
    this.state = {
      displayName: this.props.displayName
    }
  }

  render (props) {
    const {contentStrings} = this.props.config

    return (
      <div className='display-name-container' style={{ backgroundImage: `url(${this.props.bgImgUrl})` }}>
          <h2 className='heading'>{contentStrings.displayNameModal.heading}</h2>
          <p>{contentStrings.displayNameModal.subHeading}</p>
          <input type="text" placeholder={this.props.displayName}/>
          <button
            onClick={this.submitName}
            className='btn btn--primary btn--md'>
            <span>{contentStrings.displayNameModal.button}</span>
          </button>
          <p>{contentStrings.displayNameModal.cancel}</p>
      </div>
    )
  }
}

export default DisplayNameModal

Answer 1

我发现将 displayName: userData.body.displayName 添加到 setState 中，然后使用

将组件包装在父级中

{this.state.displayName &&
   <div>
    <DisplayNameModal
      config={this.config}
      displayName={this.state.displayName} />
   </div>
}

作为解决方案。