Асинхронные вызовы в реакции с Back4app - PullRequest
Новая
       15

Асинхронные вызовы в реакции с Back4app

0 голосов
/ 12 марта 2019

Привет, ppl. Я использую Back4app в качестве Backend, у меня есть такой файл.Я использую класс для инкапсуляции Parse. 

      import Parse from 'parse';

  Parse.serverURL = process.env.REACT_APP_URL;
  Parse.initialize(
    process.env.REACT_APP_appID,
    process.env.REACT_APP_JSkey
  );

  class ParseApp {
    constructor() {
      this.app = Parse;
      this.userClass = Parse.Object.extend('CustomUsers');

    }

    addUser = (name, email) => {
      const userDB = new this.userClass();
      userDB.set('UserName', name);
      userDB.set('email', email);
      userDB.save().then((res) => {
        console.log(res);
      }, (err) => {
        console.log(err);
      });
    }

    getUsers = () => {
      let Users = []
      const queryUsers = new Parse.Query(this.userClass);
      queryUsers.find().then((results) => {
          Users = results.map((user) => {
            return {
              id: user.id,
              userName: user.attributes.UserName,
              email: user.attributes.email
            };
          });
          return Users;

      }, (err) => {
        console.log(err);
      });
    }
  }

  export default new ParseApp();

, и я использую его следующим образом: 

          import React, {useState, useEffect} from 'react';
      import Note from './note';
      import './notes.css'
      import UserNameMailForm from './userNameMailForm';
      import shortid from 'shortid';
      import ParseApp from '../parse';

      const NoteApp = (props) => {
      const [users, setUsers] = useState([]);



      useEffect(() => {
        const Users = ParseApp.getUsers();

      }, []);

      const handleClick = () => {
        console.log(users);
      }

      const addNewUser = (userName, email) => {
        ParseApp.addUser(userName, email);

      }
      return (
          <div className="container p-0">
          <div
            className="screen pt-1 pb-1"
            style={{overflowY: 'scroll'}}
          >
              {/* {users.map((user) => {
                  return <Note key={shortid.generate()} userName={user.userName} email={user.email} />
              })} */}
          </div>
              <UserNameMailForm addUser={addNewUser} />
              <button type="button" onClick={handleClick}>Show</button>
          </div>
      );
      }

      export default NoteApp;

Я получаю правильные результаты для метода класса анализа, который я создал, но не определен в реакциикомпонент, что я делаю не так?Какой подход я должен следовать.Если бы вы могли дать мне несколько советов о том, какой подход я должен следовать.

1 Ответ

0 голосов
/ 12 марта 2019

Я думаю, вам может понадобиться что-то вроде этого: 

getUsers = () => {
      let Users = []
      const queryUsers = new Parse.Query(this.userClass);
      return queryUsers.find().then((results) => {      // note 'return' added!!!
          Users = results.map((user) => {
            return {
              id: user.id,
              userName: user.attributes.UserName,
              email: user.attributes.email
            };
          });
          return Users;

      }, (err) => {
        console.log(err);
      });

А потом в вашем React Component: 

useEffect(() => {
  ParseApp.getUsers().then(users => setUsers(users));
});

Вы уверены, что можете импортировать файл Parse таким образом? Это выглядит подозрительно, как бэкэнд-файл (который вы не можете запустить на веб-интерфейсе). Однако не уверен, что Back4app позволяет вам это сделать.

...