自适应卡片在反应时多次渲染答案

【问题标题】：Adaptive Cards rendering multiple times on react自适应卡片在反应时多次渲染
【发布时间】：2019-10-15 22:51:57
【问题描述】：

我正在将 json 与自适应卡动态绑定，也尝试了静态，仍然每当我们调用 setState 方法或重新初始化组件时，多个与 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} /> : ""}


        )

    }
}

当我一次又一次单击主页按钮时会发生这种情况（同一页面路由）如何解决？

【问题讨论】：

...data 来自哪里？
@JuniusL。最初它来自 API，现在为了解决问题，我将其保留为静态数据
请添加调用api的代码

标签： javascript reactjs adaptive-cards

【解决方案1】：

发生这种情况是因为您在使用 THE componentDidMount() 时渲染了脚本。所以，当你回去的时候，等等。渲染是一样的。

您可以使用 componentWillUnmount() 移除渲染。

再见^^

【讨论】：