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

【问题标题】：Passing API data from parent container to child component in React在 React 中将 API 数据从父容器传递到子组件
【发布时间】：2018-10-21 03:28:35
【问题描述】：

我有一个带有许多子组件的 React 容器。其中一个应该是一个模式，它将向用户显示他们的名字，该名字是从父容器中的用户数据 api 中获取的。我应该能够使用道具将用户数据传递给孩子，但必须遗漏一些东西，因为显示名称不会作为值显示在输入中。

父容器

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

【问题讨论】：

您没有正确调用 state。使用这个 sn-p 更改您的代码。
@IhorLavs - 我现在使用 this.state.displayname 传递 displayName，但是如何在子组件中使用它？
在您的子组件中，您只需将其称为 this.props.displayName。
@IhorLavs - 嗯，我已经设置好了<input type="text" placeholder={this.props.displayName}/>，但它没有显示在输入字段中。
控制台有错误吗？

标签： reactjs

【解决方案1】：

prop 应该通过：

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

您在哪里使用：

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

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

【讨论】：

我让父组件将 displayName 作为状态传递，但子组件如何接收它？

【解决方案2】：

首先，你获取数据的方式不对，you can check it here：

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}/>

【讨论】：

【解决方案3】：

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

将组件包装在父级中

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

作为解决方案。

【讨论】：