Javascript 呈现前更新状态：propType标记为必需但未定义

我遇到了一个组件的问题，该组件具有一些必需的proptype

我得到的错误是：

Warning: Failed prop type: The prop `firstname` is marked as required in `UserHeader`, but its value is `undefined`.
in UserHeader (at App.js:32)
in App (created by Connect(App))
in Connect(App) (at index.js:17)
in Provider (at index.js:16)

我的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';

import ErrorBoundary from './containers/ErrorBoundary'
import UserHeader from './components/UserHeader';
import Header from './components/Header';

class App extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    // Pretend this is an API call that takes a second
    setTimeout(() => {
      const data = {
        user: {
          firstname: 'bughunter',
          level: 55
        }
      };
      this.props.didMountHandler(data)
    }, 1000);
  }

  render() {
    return (
      <ErrorBoundary>
        <Header />
        <UserHeader 
          firstname={this.props.firstname}
          level={this.props.level}
        />
      </ErrorBoundary>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    firstname: state.user.firstname,
    level: state.user.level
  }
};

const mapDispatchToProps = dispatch => ({
  didMountHandler: data => {
    dispatch({
      type: 'USER_DATA_RECEIVED',
      data
    });
  }
})

const AppContainer = connect(  
  mapStateToProps,
  mapDispatchToProps
)(App);

export default AppContainer;

---

。。。但这似乎有点不正常。

您没有在

渲染之前修改状态，因为您使用的是setTimeout。渲染不会等待
设置超时
，而是在调用
组件willmount
后直接调用

您必须在redux reducer中设置一些默认值。你可以把减速器调好

user: null,
....

渲染时，检查是否有用户

render() {
    const { user } = this.props;
    { user && <UserHeader firstname={user.firstname} level={user.level} /> }


还有其他方法可以做到这一点。您可以按照建议在reducer中为
firstName
和
level
设置默认值，也可以始终使用
user
属性渲染
UserHeader
，并决定如果未设置值子值，则在其中显示什么。
您没有修改
render
之前的状态，因为您正在使用setTimeout。渲染不会等待
设置超时
，而是在调用
组件willmount
后直接调用

您必须在redux reducer中设置一些默认值。你可以把减速器调好

user: null,
....

渲染时，检查是否有用户

render() {
    const { user } = this.props;
    { user && <UserHeader firstname={user.firstname} level={user.level} /> }


还有其他方法可以做到这一点。您可以按照建议在reducer中为
firstName
和
level
设置默认值，也可以始终使用
user
属性呈现
UserHeader
，并决定如果未设置值子值，则在其中显示什么。
添加加载程序组件或如下所示的null。以及使用本地状态

state = { initialized: false }

componentWillMount() {
// Pretend this is an API call that takes a second
setTimeout(() => {
  const data = {
    user: {
      firstname: 'bughunter',
      level: 55
    }
  };
  this.props.didMountHandler(data)
  this.setState({ initialized: true });
}, 1000);
}

render(){
   if(!this.state.initialized){
       return null;
   }

   return (
     <ErrorBoundary>
        <Header />
        <UserHeader 
           firstname={this.props.firstname}
           level={this.props.level}
        />
     </ErrorBoundary>
   );
}

state={initialized:false}
组件willmount（）{
//假设这是一个需要一秒钟的API调用
设置超时（（）=>{
常数数据={
用户：{
名字：“臭虫猎人”，
级别：55
}
};
this.props.didMountHandler（数据）
this.setState（{initialized:true}）；
}, 1000);
}
render（）{
如果（！this.state.initialized）{
返回null；
}
返回(
);
}
添加加载程序组件或空值，如下所示。以及使用本地状态

state = { initialized: false }

componentWillMount() {
// Pretend this is an API call that takes a second
setTimeout(() => {
  const data = {
    user: {
      firstname: 'bughunter',
      level: 55
    }
  };
  this.props.didMountHandler(data)
  this.setState({ initialized: true });
}, 1000);
}

render(){
   if(!this.state.initialized){
       return null;
   }

   return (
     <ErrorBoundary>
        <Header />
        <UserHeader 
           firstname={this.props.firstname}
           level={this.props.level}
        />
     </ErrorBoundary>
   );
}

state={initialized:false}
组件willmount（）{
//假设这是一个需要一秒钟的API调用
设置超时（（）=>{
常数数据={
用户：{
名字：“臭虫猎人”，
级别：55
}
};
this.props.didMountHandler（数据）
this.setState（{initialized:true}）；
}, 1000);
}
render（）{
如果（！this.state.initialized）{
返回null；
}
返回(
);
}
可能是您想要签出此可能是您想要签出此