在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

道具应该通过：

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

你在哪里使用：

<DisplayNameModal
      config={this.config}
      displayName={this.displayName} />

您已在父级中将displayName设置为state，从state引用的任何内容都应称为this.state.foo ，其中该组件上的任何方法都可以称为this.foo 。

Answer 2

我发现将displayName: userData.body.displayName添加到setState ，然后将组件包装在父组件中

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

作为解决方案。

Answer 3

首先，您以错误的方式获取数据， 您可以在此处查看 ：

componentDidMount () {
  superagent.get(`/api/user`).then(res => this.setState({ user: res.body }))
}

第二个，初始化displayName的默认状态，例如，一个空字符串，当promise从服务器检索数据数据时，它将被替换：

constructor (props){
  super(props)
    this.state = {
    displayName: ''
  }
}

并将此状态作为道具传递给您的子组件：

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

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

在您的子组件中，您可以简单地调用此道具：

<input type="text" placeholder={this.props.displayName}/>