如何提取React代码中Graph接口返回JSON数组的name值并存入state

• setState 是异步执行的，调用setState更新access_token后立刻取值，拿到的是更新前的旧值，会导致Graph接口鉴权失败
• graph.get的普通回调函数会丢失React组件的this指向，无法在回调内直接调用this.setState存储数据
• 没有在接口返回的回调逻辑中执行提取name、写入state的操作

state = {
    auth: false,
    username: '',
    access_token: '',
    app_name: [],
};

responseFacebook = response => {
    if(response.status !== 'unknown')
    // setState第二个参数为更新完成后的回调，确保access_token已更新再执行后续逻辑
    this.setState({
        auth: true,
        username: response.name,
        access_token: response.accessToken
    }, () => {
        graph.setAccessToken(this.state.access_token);
        // 回调改为箭头函数，绑定组件this指向
        graph.get("/me/accounts", (err, res) => {
            if(err) {
                console.error('Graph接口请求错误：', err);
                return;
            }
            // 提取所有账户的name存入数组，若只需第一个账户的name可直接取res.data[0]?.name
            const appNameList = res.data.map(item => item.name);
            this.setState({
                app_name: appNameList
            }, () => {
                // 可在该回调中确认state更新结果
                console.log('更新完成的state：', this.state);
            })
        });
    });
}

• 可以先在回调中打印完整的res.data确认接口返回结构，避免字段名拼写错误导致取值失败
• 若res.data可能为空，建议加长度判断再取值，避免出现索引访问报错

内容的提问来源于stack exchange，提问作者Jothicharan Jothibabu