Как получить доступ к чистому значению js вне класса реагирования - PullRequest
Новая
       9

Как получить доступ к чистому значению js вне класса реагирования

0 голосов
/ 25 августа 2018

Я хочу получить доступ к значению функции 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
}

Это класс реагирования, который я хочу использовать для значения res, полученного из этой функции js. 

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

Я пытался использовать window.res, чтобы сделать его глобальной переменной, но класс реагирования не может получить значение, так как это асинхронный вызов.Что я должен изменить, чтобы исправить это

Ответы [ 4 ]

0 голосов
/ 25 августа 2018

Вы должны использовать метод жизненного цикла componentDidMount() для извлечения данных для отображения вашего компонента:

Из документов реагирования :

componentDidMount()вызывается сразу после монтирования компонента (вставки в дерево).Инициализация, которая требует DOM-узлов, должна быть здесь. Если вам нужно загрузить данные из удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

Пример: 

class App extends Component {


   constructor(props) {
        super(props);

        this.state = {
            data: null,
        };
    }

    componentDidMount() {
        this.fetchConnectionNames();
    }

    fetchConnectionNames = () => {
        window.gapi.client.people.people.connections.list({
            resourceName: 'people/me',
            pageSize: 10,
            personFields: 'names,genders,birthdays',
        }).then(response => {
            const {connections = []} = response.result;

            const data = connections.map(({resourceName, names, genders, birthdays}) => ({
                resourceName,
                name: names ? names[0].displayName : '',
                gender: genders ? genders[0].formattedValue : '',
                birthday: birthdays ? birthdays[0].value : '',
             }));

             this.setState({data});
         })
     }

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

        if(!data) return <p>Loading...</p>;

        if(!data.length) return <p>No items...</p>;

        return (
            <ul>
                {data.map(({resourceName, name, gender, birthday}) => (
                    <li key={resourceName}>
                        <p>{resourceName}</p>
                        <p>{name || 'NO VALUE'}</p>
                        <p>{gender || 'NO VALUE'}</p>
                        <p>{birthday || 'NO VALUE'}</p>
                    </li>
                ))}
            </ul>
        );
    }
}

Рабочий пример:

Edit q3v6o9mxyw

0 голосов
/ 25 августа 2018

Вам необходимо импортировать функцию.

Я предполагаю, что обе функции / классы находятся в 2 отдельных файлах.

Если вы используете веб-пакет, вы можете импортировать функцию следующим образом: 

import { listConnectionNames } from "path/to/the/file"

и затем вы можете просто вызвать эту функцию следующим образом: 

constructor() {
  this.state = { result: null }
}

async componentDidMount() {
  this.setState({
    x: await listConnectionNames()
  }
}

Если вы не используете веб-пакет, вам нужно включить оба файла в html.

Кроме того, функция в файле модуля автоматически не помещается в глобальное пространство имен / область действия

Полезные ресурсы: «Модули JavaScript: руководство для начинающих» @iam_preethi https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc

0 голосов
/ 25 августа 2018

Просто добавьте к другим ответам, вот более подробный ответ, который позволит вам увидеть данные 2-го рендера, когда состояние будет обновлено после разрешения обещания.

Обновлен список имен соединений

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;
    }
  });
}

Пример компонента реакции 

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>;
  };
}
0 голосов
/ 25 августа 2018

Просто вызовите эту функцию внутри класса

приложение класса расширяет Компонент { async componentDidMount () { const connectionNames = await listConnectionNames () this.setState ({connectionNames}) } }

...