条件付きレンダリングの問題（ReactJS）

Question

コンポーネントに適切なコンテンツを表示する際に問題が発生しました。コンポーネントは必要なすべてのストアと小道具にアクセスできますが、これを確認するためにconsole.logが表示されますが、コンテンツのレンダリングに失敗します。

Iセットアップような店舗：

const levelDefaultState = { 
level: "second"} 

そして、私は現在の状態に応じて物事をレンダリングしたい私のコンポーネントは次のようになります。

import React from 'react'; 
import { connect } from 'react-redux' 
import LevelTwo from './level2/level2' 

class LevelRenderer extends React.Component { 

renderLevel(){ 
    let currentLevel = null; 
    if (this.props.level === "second") { 
     currentLevel = <LevelTwo level={this.props.level} /> 
    } else { 
     currentLevel = 'No level' 
    } 

    return currentLevel; 
} 

render() { 
    console.log('store', this.props.level) 


    let renderLevelConst = (this.props.level) ? this.renderLevel() : notRendered() 

    function notRendered() { 
     return 'Not rendered yet' 
    } 

    return (
     <div> 
      {renderLevelConst} 
     </div> 
    ) 
} 
} 

const mapStateToProps = (state) => { 
    return { 
     level: state.level 
    } 
} 

export default connect(mapStateToProps)(LevelRenderer); 

そして、状態が「あるにもかかわらず、それがレンダリングするすべての時間は「レベルなし」の文字列です。最初の状態を「最初に」設定してから、setTimeoutで「秒」に変更しようとしましたが、何も変更はありません。

私は間違っていますか？

Answer 1

試行：

IF（this.props.level.level === "第二"）{} renderLevel

でthis.props.level = {レベルが "第二"、下位。 "1.splash"}では、this.props.level.levelを呼び出してレベル値を取得する必要があります。