简体   繁体   English

如何在 React 中调用 function 中的 function(身份验证,路由)

[英]How to call a function in a function in React (auth, routing)

I am trying to create a component that executes straight when DOM is loaded, onInit();我正在尝试创建一个在加载 DOM 时直接执行的组件 onInit();

This function posts a token to an endpoint, then if successful, I am trying to run a function called 'valid()'此 function 将令牌发布到端点,然后如果成功,我将尝试运行名为“valid()”的 function

The problem I keep getting is, when I try to call the 'valid' function in response, it says cannot history of undefined.我一直遇到的问题是,当我尝试调用“有效” function 作为响应时,它说不能历史未定义。

I think I am not passing props in the right way.我认为我没有以正确的方式传递道具。

Also if unsuccessful, an Error page should be returned.此外,如果不成功,则应返回错误页面。

Thanks for any help on this感谢您对此的任何帮助

export class LandingPage extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.valid = this.valid.bind(this);
    }

    valid = () => {
        auth.login(() => {
            this.props.history.push("/app");
        });
    };

    componentDidMount() {
        onInit();

        function onInit(props) {

            const apiUrl = "www.somefakedomain.com/endpoint"

            axios
                .post(apiUrl, {
                    token: 'somevalue123'
                })
                .then(function(response) {
                    console.log(response);
                    //CALL VALID FUNCTION HERE
                    this.valid; //throws error, how to run function here
                })
                .catch(function(error) {
                    console.log(error);
                    //Show Error Page
                });
        }
    }
    render() {
        return (
            <div>
                <Spinner />
            </div>
        );
    }
}

You are not passing anything to your onInIt function.你没有向你的 onInIt function 传递任何东西。

Are you perhaps trying to do something like this?您是否正在尝试做这样的事情? - -

export class LandingPage extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.valid = this.valid.bind(this);
    }

    valid = () => {
        auth.login(() => {
            this.props.history.push("/app");
        });
    };

    componentDidMount() {
        function onInit(props) {

            const apiUrl = "www.somefakedomain.com/endpoint"

            axios
                .post(apiUrl, {
                    token: 'somevalue123'
                })
                .then(function(response) {
                    console.log(response);
                    //CALL VALID FUNCTION HERE
                    this.valid(); //need to call function not reference it//throws error, how to run function here
                })
                .catch(function(error) {
                    console.log(error);
                    //Show Error Page
                });
        }
      onInIt(this.props);
    }
    render() {
        return (
            <div>
                <Spinner />
        </div>
    );
}
}

javascript reactjs function authent

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM