javascript - 反应钩子不保存数据

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 调用上。

标签： javascriptreactjs

Answer 1

将您的 onSubmit 函数更改为以下内容以避免页面重新加载。

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