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

我发现将title: Kirsten Greed description: Cognitive Load添加到displayName: userData.body.displayName，然后使用

将组件包装在父级中

setState

作为解决方案。

Answer 2

道具应该通过：

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

您正在使用的地方：

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

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

Answer 3

首先，您以错误的方式获取数据you can check it here：

#include <iostream>

int main ()
 {
   auto l = [](auto ... as) { return sizeof...(as); };

   std::cout << l(1, 2L, 3.0, 4.0f, "5") << std::endl; // print 5
 }

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

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

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

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

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

3 个答案: