Problem mit bedingtem Rendering (ReactJS)

Question

Ich habe ein Problem, das den richtigen Inhalt in meiner Komponente darstellt. Component hat Zugriff auf alle notwendigen Speicher und Requisiten, ich console.log, um dies zu bestätigen und dennoch Inhalte nicht zu rendern.

ich Setup ein Geschäft wie folgt aus:

const levelDefaultState = { 
level: "second"} 

Und meine Komponente, wo ich will die Dinge machen, auf dem aktuellen Stand abhängig sieht wie folgt aus:

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

Und obwohl der Staat " Sekunde "die ganze Zeit alles, was es rendert, ist" keine waagerecht ausgerichtete "Schnur. Versucht, den Anfangszustand auf "first" zu setzen und dann mit setTimeout auf "second" zu ändern, keinerlei Änderungen.

Was mache ich falsch?

Answer 1

Versuchen:

if (this.props.level.level === "zweite") {} in renderLevel

Da this.props.level = {Stufe: "zweite", sublevel: "1.splash"} müssen Sie this.props.level.level aufrufen, um den Level-Wert zu erhalten.