React 360和Cloud Firestore:尝试写入数据库时的状态400

Question

我正在开发一款React 360应用程序，该应用程序要求用户在VR模式下注册。我的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？

Answer 1

更新：

使用Firebase函数(带有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有关，但我显然对建议持开放态度。