反應掛鈎不保留數據

Question

我一直在嘗試學習React鈎子，以開始構建個人項目，但遇到了一些障礙。 當前，當我發出axios請求時，頁面將重置並且沒有數據顯示。

為了確保它以正確的方式工作，我制作了一個類版本，並且能夠檢索數據並將其上傳到setState狀態。

import React, { useState } from "react";
import axios from "axios";

const Form = () => {
  const [signup, setForm] = useState({ username: "", email: "", password: "" });
  const [user, setUser] = useState({ user: "" });

  const submit = () => {
    axios.get("/api/users").then(user => {
      setUser({ user });
    });
  };
  return (
    <div>
      {user.username}
      <h1>This is the Landing Page!</h1>
      <form onSubmit={submit}>
        <input
          type="text"
          placeholder="Enter Username"
          value={signup.username}
          onChange={e => setForm({ ...signup, username: e.target.value })}
        />
        <input
          type="text"
          placeholder="Enter Email"
          value={signup.email}
          onChange={e => setForm({ ...signup, email: e.target.value })}
        />
        <input
          type="password"
          placeholder="Enter Your Password"
          value={signup.password}
          onChange={e => setForm({ ...signup, password: e.target.value })}
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
};

類選項有效

    class Form extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          user: ""
        };
      }

      loadData = () => {
        console.log(this.state);
        axios.get("/api/users").then(user => {
          console.log(user.data);
          debugger;
          this.setState({ user });
        });
      };

      render() {
        return (
          <div>
            <h1>This is the header</h1>
            <button onClick={this.loadData}>This is a button</button>
          </div>
        );
      }
    }

我期望的是數據能夠持久存在。 它確實出現在console.log中，但即使在幾秒鍾之內消失，就好像整個頁面仍在重新加載一樣。 當我輸入時，它可以工作，但不能在axios呼叫上使用。

Answer 1

將onSubmit函數更改為以下內容，以避免重新加載頁面。

const submit = (e) => {
    e.preventDefault();
    axios.get("/api/users").then(user => {
      setUser({ user });
    });
  };

Answer 2

您想通過添加event.preventDefault（）來禁止瀏覽器提交表單，並讓您的Submit（）函數改為使用Axios（或獲取）發送該請求：

const submit = event => { event.preventDefault(); ... }