React中父容器向子组件传递API数据问题排查

咱们来一步步拆解你遇到的问题，主要有几个关键错误导致输入框没显示用户名：

1. 父组件初始化state的致命错误 #

在ParentContainer的constructor里，你写了：

this.state = { displayName: this.state.user.displayName }

这时候this.state还没有被初始化，this.state.user是undefined，直接访问displayName不仅会报错，而且完全起不到初始化的作用。正确的初始state应该只需要初始化user为null，等API请求完成后再更新：

this.state = { user: null }

2. 父组件传递props的错误 #

你在componentDidMount里把获取到的用户数据存在了this.state.user里，但在render时传给DisplayNameModal的是displayName={this.displayName}——这里的this.displayName根本不存在！应该传递this.state.user里的displayName，同时用可选链操作符避免用户数据还没加载时的报错：

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

3. 子组件的两个关键问题 #

（1）render方法不该接收props参数 #

你的子组件render方法写了render (props)，这会覆盖组件自身的this.props，导致你在render里访问的props不是父组件传递的正确值。render方法不需要接收参数，直接用this.props即可。

（2）子组件state未同步props更新 #

如果你需要让输入框支持编辑，把props的displayName存在子组件state是合理的，但父组件更新props时，子组件的state不会自动同步。需要添加componentDidUpdate生命周期来监听props变化：

componentDidUpdate(prevProps) {
  if (prevProps.displayName !== this.props.displayName) {
    this.setState({ displayName: this.props.displayName || '' })
  }
}

另外，你原来的代码里submitName方法没有绑定this，点击按钮时会报错，记得在constructor里绑定：

this.submitName = this.submitName.bind(this)

修正后的完整代码 #

父组件 #

class ParentContainer extends React.Component { 
  constructor (props) { 
    super(props) 
    this.state = { 
      user: null 
    } 
    this.config = this.props.config 
  } 

  async componentDidMount () { 
    try { 
      const userData = await superagent.get(`/api/user`) 
      this.setState({ user: userData.body }) 
      console.log(userData.body.displayName)
    } catch (err) { 
      console.log(`Cannot GET user.`, err) 
    } 
  } 

  render () { 
    const { user } = this.state
    // 注意：这里的reviews变量需要确保已定义（比如在state或props中）
    return ( 
      <div className='reviews-container'> 
        <ReviewForm config={this.config} /> 
        <ReviewList reviews={reviews} ratingIcon={this.ratingIcon} /> 
        <DisplayNameModal 
          config={this.config} 
          displayName={user?.displayName}
          bgImgUrl="你的背景图地址" // 记得传递这个props，不然子组件的背景图会失效
        /> 
      </div> 
    ) 
  } 
} 

export default ParentContainer

子组件 #

class DisplayNameModal extends React.Component { 
  constructor (props){ 
    super(props) 
    this.state = { 
      displayName: this.props.displayName || '' 
    } 
    this.submitName = this.submitName.bind(this)
  }

  componentDidUpdate(prevProps) {
    if (prevProps.displayName !== this.props.displayName) {
      this.setState({ displayName: this.props.displayName || '' })
    }
  }

  submitName() {
    // 这里添加提交逻辑，比如调用API保存用户名
    console.log('要提交的用户名：', this.state.displayName)
  }

  render () { 
    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> 
        {/* 绑定value到state，支持用户编辑 */}
        <input 
          type="text" 
          value={this.state.displayName} 
          onChange={(e) => this.setState({ displayName: e.target.value })}
          placeholder="请输入用户名" 
        /> 
        <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

额外注意点 #

• 父组件中的reviews变量在render中被使用，但我没看到它的定义，需要确保它是从state或props中获取的，否则会报错。
• 子组件中用到的bgImgUrl props，父组件需要传递正确的地址，否则背景图无法显示。

内容的提问来源于stack exchange，提问作者Matt