reactjs - 为什么我的反应网络应用程序在谷歌登录和数据映射未定义后返回 500

问题描述

我正在使用 react-google-login，成功登录后，我调用 onSuccess 来 responseGoogle，获取访问令牌，然后使用新令牌获取 API。之后，我将 setState 设置到我的列表中以将其呈现在下面：

responseGoogle = response => {
        console.log(response);
        const tokenBlob = new Blob([JSON.stringify(
            {access_token: response.accessToken},
            null, 2)],
            {type: 'application/json'});

        fetch(API URL here, {
            method: 'post',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                Authorization: 'Bearer ' + response.accessToken,
            },
            body: JSON.stringify(
                this.state),
        }).then(res => res.json())
            .then((result) => {
                    this.setState({
                        isLoaded: true,
                        access: response.accessToken,
                        companyList: result.companyList,
                    });
                },
                (error) => {
                    this.setState({
                        isLoaded: true,
                        error
                    });
                }
            )
        console.log(response.accessToken);
    };

之后，我只是将它呈现到一个下拉列表中：

render() {
    const {companyList} = this.state;

    return (
        <div className="Login">
            <Col>
                <Card className="text-center">
                    <Card.Header as="h3">Login</Card.Header>
                    <br/>
                    <Form>
                        <GoogleLogin className="text-center"
                                     clientId=//CLIENTID
                                     buttonText="LOGIN WITH GOOGLE"
                                     name={"googleToken"}
                                     onClick={this.handleChange}
                                     onSuccess={this.responseGoogle}
                                     onFailure={this.responseGoogleFail}
                        />
                        <br/>
                        <br/>

                        {/*{access &&*/}
                        {companyList.map(companyList => (
                            <Dropdown>
                                <Dropdown.Toggle variant="success" id="dropdown-basic">
                                    Please choose a company
                                </Dropdown.Toggle>

                                <Dropdown.Menu>

                                    <Dropdown.Item>{companyList.name}</Dropdown.Item>

                                </Dropdown.Menu>

                            </Dropdown>
                        ))}
                        {/*}*/}
                    </Form>
                    <br/>
                </Card>
            </Col>
        </div>
    );
}

该 API 是由我组的负责人设计的，因为 google 登录设置为 POST 并且在需要请求 googleToken:"string" 之后，它将以我想要的公司列表进行响应。我计划在获得列表后使用内联条件渲染，但这并不重要。似乎我在这里犯了一些重大错误，无法弄清楚为什么

标签： reactjs

reactjs - 为什么我的反应网络应用程序在谷歌登录和数据映射未定义后返回 500

问题描述

解决方案

推荐阅读