Question

您好，我使用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;

我在创建的parse类方法上获得了正确的结果，但在react组件上未定义，我在做什么错？我应该采取什么方法。如果您可以给我一些建议，请问我应该采用哪种方法。

Answer 1

我认为您可能需要这样的东西：

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

您确定可以导入解析文件吗？它看起来像一个可疑的后端文件（您不能在前端文件上运行）。不确定Back4app是否使您能够这样做。

使用Back4app在React中进行异步调用

1 个答案: