Question

我没有在componentDidMount中调用两个函数。当我单击bangla的更改时，当我单击English的更改时，但是在路由过程中它仅保留英语，因此我想在componentDidMount中设置状态，但它仅调用一个funtion.if。单击孟加拉，它设置了孟加拉，但当我更改路由时，它保持相同的语言。所以我该怎么设置。

 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;

Answer 1

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

因此，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!

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

如何在componentDidMount中调用twofunction？

1 个答案: