Reactjs 将API数据从父容器传递到React中的子组件

我有一个包含许多子组件的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

类ParentContainer扩展React.Component{ 建造师（道具）{ 超级（道具） 此.state={ displayName:this.state.user.displayName } this.config=this.props.config } 异步组件didmount（）{ 试一试{ const userData=wait superagent.get（`/api/user`） 等待此.setState（{user:userData.body}）

---

console.log（userData.body.displayName）道具应通过以下方式传递：

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

您正在使用的位置：

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

---

您已经在父级中设置了state上的displayName，从state引用的任何内容都应称为

this.state.foo

，其中该组件上的任何方法都可以称为

this.foo

首先，您以错误的方式获取数据：

第二个，初始化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>
  )
}

render（）{
返回(
)
}

在您的子组件中，您可以简单地称之为道具：

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

---

我发现将

displayName:userData.body.displayName

添加到

setState

中，然后用

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

{this.state.displayName&&
}

---

作为解决方案。

您没有正确调用state。请使用此代码段更改代码。@IhorLavs-我现在使用

this.state.displayName传递displayName，但是我如何在子组件中使用它？在子组件中，您只需像这样调用.props.displayName。@IhorLavs-hmm，这就是我已经拥有的t设置
，但它不显示在输入字段中。控制台中有错误吗？我让父组件将displayName作为状态传递，但子组件如何接收它？
<input type="text" placeholder={this.props.displayName}/>

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