当调用setState()时，FETCH帮助函数返回未定义。

Question

我有一个帮助函数，使用FETCH从一个API中提取数据。我试图使用setState()将fetch请求的响应设置为我的状态，但它一直返回undefined。以下是我的辅助函数：（我意识到我在前端暴露了我的键，但如果我部署到生产中，我将进行调整

const authCode = {
    async getAuthCode() {
        const authCodeMatch = window.location.href.match(/code=([^&]*)/)[1];
        await fetch(`https://id.twitch.tv/oauth2/token?client_id=${TWITCH_ID}&client_secret=${TWITCH_SECRET}&code=${authCodeMatch}&grant_type=authorization_code&redirect_uri=${TWITCH_CB}`, {
            method: 'POST',
            mode: 'cors',
            'Access-Control-Allow-Origin':'*',
            credentials: 'same-origin', 
            headers: {
             'Content-Type': 'application/json'
            }
        })
        .then(response => 
            response.json()    
        )
        .then(data => {
            console.log(data.access_token);
            fetch(`https://api.twitch.tv/helix/users?id=43691`, {
                method: 'GET',
                mode: 'cors',
                'Access-Control-Allow-Origin':'*',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'Client-ID': TWITCH_ID,
                    'Authorization': 'Bearer ' + data.access_token
                }
            })
            .then(response => response.json())
            .then(newdata => {
                console.log(newdata);
                if (!newdata.data) {
                    return [];
                }
                //console.log(newdata.data[0].view_count);
                return newdata.data.map(views => ({
                    view_count: views.view_count
                }))
            })
        })
    }

一切都能很好地记录到控制台，所以我很确定我通过正确的数组来解析数据。在任何情况下，这里是控制台中返回的对象以及我的组件代码。在我的profile组件中，它只是将undefined推送到我的状态。

// Console response
data: Array(1)
0:
broadcaster_type: "partner"
description: ""
display_name: "Faker"
id: "43691"
login: "faker"
offline_image_url: "https://static-cdn.jtvnw.net/jtv_user_pictures/7d76e34d-3ee3-42c0-a46b-e320d37fcde6-channel_offline_image-1920x1080.jpeg"
profile_image_url: "https://static-cdn.jtvnw.net/jtv_user_pictures/b2eb8a23-d6ad-45aa-bd8e-062133b64452-profile_image-300x300.png"
type: ""
view_count: 81769581
__proto__: Object
length: 1
__proto__: Array(0)

组件

export default class Profile extends Component {

    constructor(props) {
        super(props);

        this.state = {
            viewData: []
        }

        this.handleNewPost = this.handleNewPost.bind(this);

    }

    handleNewPost () {
        authCode.getAuthCode().then(viewcountResults => {
            this.setState({viewData: viewcountResults})
        })
    }

    render() {
        return (
            <div>
                <Container>
                <div className='mt-5'>
                <Button color='success' size='lg' onClick={this.handleNewPost}>
                    Post Data
                </Button>
                </div>
                <div>
                {this.state.viewData.view_count}
                </div>
                </Container>
            </div>
        )
    }

谢谢你的帮助！我有一个帮助函数，它使用FETCH从API中提取数据。

Answer 1

你的函数 getAuthCode 并没有返回一个包含你想要接收的数据的Promise。此外，你可以通过使用 await 而不是混合 await 和回调。

const authCode = {
    async getAuthCode() {
        const authCodeMatch = window.location.href.match(/code=([^&]*)/)[1];
        let response = await fetch(`https://id.twitch.tv/oauth2/token?client_id=${TWITCH_ID}&client_secret=${TWITCH_SECRET}&code=${authCodeMatch}&grant_type=authorization_code&redirect_uri=${TWITCH_CB}`, {
            method: 'POST',
            mode: 'cors',
            'Access-Control-Allow-Origin':'*',
            credentials: 'same-origin', 
            headers: {
             'Content-Type': 'application/json'
            }
        });
        const data = await response.json();
        console.log(data.access_token);

        response = await fetch(`https://api.twitch.tv/helix/users?id=43691`, {
            method: 'GET',
            mode: 'cors',
            'Access-Control-Allow-Origin':'*',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'Client-ID': TWITCH_ID,
                'Authorization': 'Bearer ' + data.access_token
            }
        });

        const newData = await response.json();
        console.log(newdata);

        if (!newdata.data) {
            return [];
        }
        return newdata.data.map(views => ({
            view_count: views.view_count
        }));
    }
}