0

我正在开发一个要求用户在 VR 模式下注册的 React 360 应用程序。我的文件中的相关代码SignUp.js如下：

import fire from "../../Firebase";
import "firebase/firestore";
const db = fire.firestore();

export default class SignUp extends React.Component {
  constructor() {
    super();
    this.state = {
      userData: {
        name: "",
        email: "",
        password: "",
      },
    };
  }

  createUser = () => {
    fire
      .auth()
      .createUserWithEmailAndPassword(
        this.state.userData.email,
        this.state.userData.password
      )
      .then((user) => {
        console.log("Successfully created user!");
        db.collection("users")
          .doc(this.state.userData.email)
          .set({
            profile: {
              email: this.state.userData.email,
              name: this.state.userData.name,
            },
          })
          .then(() => console.log("Successfully added user data to db"))
          .catch((err) => console.log("Error adding data", err));
      })
      .catch((error) => {
        console.log("Error creating user!", error);
      });
  };
......
......

我的Firebase.js代码：

import * as firebase from "firebase";

var config = {
  apiKey: "my key...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "...",
};

const fire = firebase.initializeApp(config);

export default fire;

中的相关依赖项package.json：

  "dependencies": {
    "react": "16.13.1",
    "react-360": "~1.1.0",
    "firebase": "^7.14.0",
    "react-360-keyboard": "^1.0.2",
    "react-360-web": "~1.1.0",
    "react-native": "~0.55.4",
    "three": "^0.87.0"
  },
  "devDependencies": {
    "babel-jest": "^19.0.0",
    "babel-preset-react-native": "^1.9.1",
    "jest": "^19.0.2",
    "react-devtools": "^2.5.2",
    "react-test-renderer": "16.0.0",
    "xopen": "1.0.0"
  },

发生了什么：输出如下：

>>> Successfully created user!
>>> GET https://firestore.googleapis.com/... 400

可以创建和验证用户，我已经通过在控制台中检查新用户进行了验证。但是，当我尝试将新用户数据写入我的 Firestore 数据库时，我得到一个状态 400。在 Chrome 中，它只是说：Your client has issued a malformed or illegal request...。如有必要，我可以分享更多关于网络跟踪的信息。

我已经尝试过：
我使用与上述相同的代码和 Firebase 凭据制作了一个单独的 React 应用程序（不是 React 360），并且我能够成功写入我的 Firestore 数据库。

我的问题：
如何更改我的上述实现以使用 React 360 成功写入 Firestore？

4

1 回答 1

0

更新：

使用 Firebase Functions (with axios) 写入数据库而不是我上面所做的工作。新createUser功能如下：

  createUser = (userData) => {
    fire
      .auth()
      .createUserWithEmailAndPassword(userData.email, userData.password)
      .then(() => {
        console.log("Successfully created user: ", userData.email);
        axios
          .post(
            "https://...cloudfunctions.net/...",
            {
              name: userData.name,
              email: userData.email,
            }
          )
          .then((response) => {
            console.log("Successfully added user data to db!", response);
          })
          .catch((error) =>
            console.log("error occurred adding user to db", error)
          );
      })
      .catch((error) => {
        console.log("error creating user", error);
      });
  };

Firbase 功能：

exports.createNewUser = functions.https.onRequest((request, response) => {
  admin
    .firestore()
    .collection("users")
    .doc(request.body.email)
    .set({
      profile: {
        email: request.body.email,
        name: request.body.name,
      },
    })
    .then(() => {
      response.send("added user data to db!");
    })
    .catch(() => console.log("failed to add user data to db!"));
});

我不知道为什么这行得通，而上面的另一种（更自然的）方式却行不通。我的猜测是它与 React 360 相关，但我显然愿意接受建议。

于 2020-04-18T07:15:07.237 回答