4

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

3 回答 3

2

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

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

作为解决方案。

于 2018-05-10T20:29:08.450 回答
1

道具应该通过：

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

您在哪里使用：

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

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

于 2018-05-10T19:20:41.010 回答
0

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

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}/>
于 2018-05-10T20:22:25.847 回答