javascript - 如何在 react 类之外访问纯 js 值

Question

我想在 React 类之外访问一个 js 函数值。我该怎么做。

这是我要访问的函数

export function listConnectionNames() {
  let data = []
  let res = window.gapi.client.people.people.connections.list({
     'resourceName': 'people/me',
     'pageSize': 10,
     'personFields': 'names,genders,birthdays'
   }).then(function(response) {
     var connections = response.result.connections;
     if (connections && connections.length > 0) {
       for (let i = 0; i < connections.length; i++) {
         let item = {
           "resourceName": connections[i].resourceName,
           "name": connections[i].names ? connections[i].names[0]["displayName"] : "",
           "gender": connections[i].genders ? connections[i].genders[0]["formattedValue"] : "",
           "birthday": connections[i].birthdays ? connections[i].birthdays[0]["value"] : ""
         }
        data.push(item)
       }
       return data
     }
   })
   return res
}

这是我想使用从那个 js 函数获得的 res 值的 React 类。

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {

我尝试使用 window.res 使它成为一个全局变量，但是 react 类无法获取该值，因为它是一个异步调用。我应该更改什么来修复它

Answer 1

只是为了补充其他答案，这里有一个更彻底的答案，它允许您在 promise 解决后状态更新时看到第二次渲染的数据。

更新列表连接名称

export function listConnectionNames() {
  return window.gapi.client.people.people.connections.list({
    'resourceName': 'people/me',
    'pageSize': 10,
    'personFields': 'names,genders,birthdays'
  }).then(function(response) {
    let data = []
    const connections = response.result.connections;
    if (connections && connections.length > 0) {
      for (let i = 0; i < connections.length; i++) {
        let item = {
          "resourceName": connections[i].resourceName,
          "name": connections[i].names ? connections[i].names[0]["displayName"] : "",
          "gender": connections[i].genders ? connections[i].genders[0]["formattedValue"] : "",
          "birthday": connections[i].birthdays ? connections[i].birthdays[0]["value"] : ""
        }
        data.push(item);
      }
      return data;
    }
  });
}

示例 React 组件

import React from 'react';
import { listConnectionNames } from './where-ever-the-list-connection-name-file-is.js';

class App extends React.Component {
  state = {
    data: null
  };
  componentDidMount() {
    listConnectionNames().then((data) => {
      this.setState({
        data,
      });
    });
  };
  render() {
    console.log(this.state.data);
    return <div>Hello World</div>;
  };
}