React - Redux：存储数据未呈现？

Question

我正在尝试从我的 redux 商店中呈现一个简单的配置文件。 实际上，数据已成功提供并映射到我的道具。 我可以在控制台中记录配置文件信息。 但是当我渲染配置文件数据时，它告诉我数据没有定义。

当我控制台记录配置文件时，它首先显示未定义，然后显示数据（见下）。 我想知道反应是否会在数据未定义的那一刻尝试渲染。

控制台日志

undefined                        profile.js:28 

Object                           profile.js:28 
bio: "Test"
id: 2
image: "http://localhost:8000/media/default.jpg"

零件

export class ProfileDetail extends Component {

  constructor(props) {
    super(props);  
}

 componentDidMount() {                                                         
    this.props.getProfile(this.props.match.params.id);
  }


    static propTypes = {
      profile: PropTypes.array.isRequired,
      getProfile: PropTypes.func.isRequired,
   };

render() {  
    const profile = this.props.SingleProfile;
    console.log (profile)

    return (

  <Fragment>
        
      <div className="card card-body mt-4 mb-4">
      <h2>{profile.bio}</h2> // if i use here just a string its successfully rendering
      </div>
      </Fragment>
   
    );
  }
}

function mapStateToProps(state, ownProps) {
  const { profile} = state.profile
  const id = parseInt(ownProps.match.params.id, 10)      
  const SingleProfile = profile.find(function(e) {
    return e.id == id;
  });

  return { profile, SingleProfile}
}


export default connect(
  mapStateToProps,
  { getProfile}
)(ProfileDetail);

我有点失落，很高兴得到任何澄清。

Answer 1

您需要检查配置文件是否已加载。 请求需要一些时间（不是即时的）加载任何数据是正常的。 检查配置文件是否存在并显示其属性

<h2>{profile && profile.bio}</h2>

作为替代方案，您可以显示一条消息：

<h2>{profile ? profile.bio : "Profile not loaded yet"}</h2>