如何调用componentDidMount中的两个函数？答案

【问题标题】：How to call twofunction in componentDidMount?如何调用componentDidMount中的两个函数？
【发布时间】：2018-10-13 12:58:12
【问题描述】：

我未能在 componentDidMount 中调用两个函数。当我单击孟加拉语时，它的变化，当我单击英语时，它的变化，但在路由期间它只保持英语，所以我想在 componentDidMount 中设置状态，但它只调用一个函数。如果单击孟加拉语，它设置了孟加拉语，但是当我更改路由时，它仍然是相同的语言。那么我该如何设置呢。

 import React, { Component } from 'react';
    import { connect } from "react-redux";
    import {setLanguage} from "../../actions";
    import { Link } from "react-router-dom";

    class MenuComp extends Component {
        constructor(props){
            super(props);
            this.setLang = this.setLang.bind(this);
            this.state= {
                "maintitle": {
                    "titlelist": [
                        {"title1":"Timetable"},
                        {"title2":"Ticket Prices"},
                        {"title3":"About Us"}
                    ]
                }
            };
        }

        setLang(lang){
            this.props.setLanguage(lang);
            this.props.history.push('/menu');
        }
        changeLanguage = () => {
            this.setState({
                "maintitle": {
                    "titlelist": [
                        {"title1":"সময়সূচী"},
                        {"title2":"টিকেটর মূল্য"},
                        {"title3":"আমাদের সম্পর্কে"}
                    ]
                }
            });
         };
         changeLang = () => {
            this.setState({
                "maintitle": {
                    "titlelist": [
                        {"title1":"Timetable"},
                        {"title2":"Ticket Prices"},
                        {"title3":"About Us"}
                    ]
                }
            });
         };

         componentDidMount() {
            this.changeLanguage();
           this.changeLang();
          }

        render() {

            return (
                <div className="Menu">
                <div className="menu-header">
                <div className="container-fluid p-0">
                    <div className="row m-0">
                        <div className="col-md-4 p-0 d-flex justify-content-end">
                            <div className="align-self-center">
                                <a className="lang" onClick={() => { this.setLang('bn'); this.changeLanguage(); }}>Bangla</a> | 
                                <a className="lang l-active" onClick={() => { this.setLang('en'); this.changeLang(); }}>English</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <main className="navigation">
                <div className="container-fluid p-0">
                    <div className="row m-0">

                        <div className="col-md-4 pl-0">
                            <Link to="/timetable" className="lang">
                                <div className="card-content">                             
                                    <h6 className="card-title">{
                                        this.state.maintitle.titlelist.map((title, i)=>{
                                            return (<p key={i}>{title.title1} </p>)
                                        })
                                    }</h6>
                                </div>
                            </Link>
                        </div>

                        <div className="col-md-4 pl-0">
                            <Link to="/ticketprice" className="lang">
                                <div className="card-content">
                                    <h6 className="card-title">{
                                        this.state.maintitle.titlelist.map((title, i)=>{
                                            return (<p key={i}>{title.title2} </p>)
                                        })
                                    }</h6>
                                </div>
                            </Link>
                        </div>

                            </Link>
                        </div>
                    </div>
                </div>
            </main>
                </div>

            );
        }
    }

    function mapStateToProps(state){
        return {
            lang: state.lang.lang
        }
    }
    const Menu = connect(mapStateToProps, {setLanguage})(withRouter(MenuComp));


    export default Menu;

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

这是一个异步问题。因此，setState 方法异步运行。这使得在调用setState() 之后立即阅读this.state 是一个潜在的陷阱。

因此，componentDidMount 方法中的行将被执行，但是，您无法预测其中哪一行将在另一行之前完成。

现在，我不完全理解您要实现的目标，而是使用componentDidUpdate 或setState 回调(setState(updater, callback))：类似这样：

this.setState((state, props)=> ({
            "maintitle": {
                "titlelist": [
                    {"title1":"সময়সূচী"},
                    {"title2":"টিকেটর মূল্য"},
                    {"title3":"আমাদের সম্পর্কে"}
                ]
            }
        }), ()=> {// do what you want next!})
// (this could be inside your componentDidMount!

如果这没有帮助，请告诉我！

【讨论】：