将状态发布到火力基地答案

【问题标题】：Posting State to firebase将状态发布到火力基地
【发布时间】：2019-11-11 14:16:19
【问题描述】：

我正在尝试将 name 从状态发布到 firebase，并不断获得状态 405。

我尝试更改导入和发送数据的方式，但我不知道哪里出错了。

Index.js：

import React, { Component, Fragment, useState } from "react";
import { render } from "react-dom";
import axios from "axios";
import firebase from "firebase";

import { firebaseConfig } from "./firebase";

import Header from "./components/Header";

import "./style.css";

const App = () => {
  const [name, setName] = useState("Ryan");

  const handleClick = e => {
    console.log("Working");
    axios.post(
      "https://lq-time-tracking.firebaseio.com/",
      { name },
      { firebaseConfig }
    );
  };
  return (
    <div>
      <Header name={name} handleClick={handleClick} setName={setName} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

Header.js：

import React from "react";
import styled from "styled-components";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Home";

import "../style.css";

const Header = ({ name, handleClick, setName }) => {
  return (
    <Router>
      <nav className="navbar">
        <Link className="nav-item" to="/contact">
          Contact
        </Link>
        <Link className="nav-item" to="/about">
          About
        </Link>
        <Link className="nav-item" to="/home">
          Home
        </Link>
      </nav>
      <Switch>
        <Route
          exact
          path="/home"
          render={(...props) => (
            <Home name={name} handleClick={handleClick} setName={setName} />
          )}
        />

      </Switch>
    </Router>
  );
};

export default Header;

Home.js：

import React, { Fragment } from "react";

const Home = ({ name, setName, handleClick }) => {
  return (
    <>
      <h1>This is my State: {name}</h1>
      <input type="text" onChange={e => setName(e.target.value)} />
      <button type="Submit" onClick={e => handleClick(e)}>
        Submit
      </button>
    </>
  );
};

export default Home;

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database axios

【解决方案1】：

如果我没记错的话，由于您使用 https://lq-time-tracking.firebaseio.com（这是一个 Firebase 实时数据库 URL），我了解到您正试图通过向https://lq-time-tracking.firebaseio.com网址。

这不起作用，因为正如 doc 中所述，虽然您可以将 Firebase 实时数据库 URL 用作 REST 端点，但您“需要将 .json 附加到 URL 的末尾”强>。

此外，在您的情况下，我认为您应该使用 PUT，因为您只想将字符串写入 Firebase 数据库。

在您的问题中不清楚您要将数据写入数据库中的哪个位置，但是如果您要将值name 写入users/user1 节点的name 子节点，您可以这样做如下：

axios.put("https://lq-time-tracking.firebaseio.com/users/user1.json", {name})

【讨论】：