自适应卡多次渲染反应

Question

I am binding json with Adaptive cards dyncamically, tried static also, still whenever we call setState method or reinitialize the component, Multiple instances of adaptive cards bound with the UI.

<AdaptiveCard payload={this.state.adapJson} />

class Home extends PureComponent {


    constructor() {
        super();
        this.state = {
            name: '',
            response: {},
            adaJson: {},
            renderFlag : false,
            weather: {},
            tempt: '',
            tempDesc: ''
        };
    }
    getTime() {
        var myDate = new Date(); var greet = "";
        var hrs = myDate.getHours();
        if (hrs < 12)
            greet = "Good Morning";
        else if (hrs >= 12 && hrs <= 17)
            greet = "Good Afternoon";
        else if (hrs >= 17 && hrs <= 24)
            greet = "Good Evening";
        return greet;
    }
    componentDidMount() {
        this.showPosition();

        // if (navigator.geolocation) {
        //   navigator.geolocation.getCurrentPosition(this.showPosition, this.err);

        //   }        
    }


 showPosition() {
    //some code          
    }
    render() {
        var d = new Date()

        this.state.adaJson = {
            "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
            "type": "AdaptiveCard",
            "version": "1.0",
            "body": [
                {   
                    ..data..
                }
            ]
        };

        return (<div className="App">
                        <html...>    
                    {this.state.tempt ? <AdaptiveCard payload={this.state.adaJson} /> : ""}


        )

    }
}

This occurs when I click on home button again and again(same page routing) How to fix it ?

Answer 1

This occurs it's because you render your script when THE componentDidMount(). SO, when you go back, etc. The render is the same.

You can remove the render with componentWillUnmount().

Bye bye ^^