时间戳

首页 > 解决方案 > React 中的异步调用与 Back4app

reactjs - React 中的异步调用与 Back4app

问题描述

嗨 ppl 我正在使用 Back4app 作为后端，我将它放在这样的文件中。我使用一个类来封装 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;

我在我创建的解析类方法上得到了正确的结果，但在反应组件上未定义，我做错了什么？我应该遵循什么方法。如果你能给我一些关于我应该遵循哪种方法的建议。

标签： reactjsback4app

解决方案

我想你可能需要这样的东西：

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 组件中：

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

你确定你可以像那样导入 Parse 文件吗？它看起来很像一个后端文件（你不能在前端运行）。但是，不确定 Back4app 是否能让您做到这一点。

推荐阅读