Question

我正在尝试使用Back4App作为后端构建此身份验证系统，为此我使用useState挂钩存储输入电子邮件。第一次调用handleSubmit时，它不起作用（不登录控制台，也不显示在数据库中），但是第二次调用时，它按预期的方式工作。这是完整的代码：

import React, { useState, useEffect } from "react";
import "./App.css";
import Parse from "parse/node";
import {
  Button,
  Input,
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Box,
  Grid,
} from "@material-ui/core";

Parse.initialize(
  "7lgNpft2XSQJkk0dxf0oluQB7NtPTsNBp84opurx",
  "6mFJYrSwI7iYtYQAn4E1qJVLlf0LWd4i0nX4CP7F"
);

Parse.serverURL = "https://parseapi.back4app.com/";

const App = () => {
  const [email, changeEmail] = useState("");
  const [metaEmail, changeMetaEmail] = useState("");

  const handleInput = (e) => {
    const { value } = e.target;
    changeMetaEmail(value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (re.test(metaEmail)) {
      changeEmail(metaEmail);
      console.log(email);
      console.log(metaEmail);
      var Person = Parse.Object.extend("Person");
      var person = new Person();
      person.set("email", email);
      person.save();
    }
  };

  return (
    <div className="mainContainer">
      <AppBar position="static">
        <Toolbar variant="dense">
          <Typography>{email}</Typography>
        </Toolbar>
      </AppBar>
      <Grid container justify="center">
        <Box classes="inputArea" margin="2rem">
          <Grid container xs="10rem">
            <Input
              onChange={(e) => {
                handleInput(e);
              }}
            ></Input>
          </Grid>
          <Grid container justify="center">
            <Box margin="10px">
              <Button
                variant="contained"
                onClick={() => {
                  handleSubmit();
                }}
              >
                Submit
              </Button>
            </Box>
          </Grid>
        </Box>
      </Grid>
    </div>
  );
};

export default App;

Answer 1

好吧，原来是因为我调用控制台日志并将其推送到服务器后，“电子邮件”已更改。我通过使用“ useEffect”钩子来解决此问题，该钩子在每次电子邮件更新时都会被调用，所以现在它仅在实际更改电子邮件之后才起作用。

如果有人有更好的选择，请告诉我！

这是工作代码：

import React, { useState, useEffect } from "react";
import "./App.css";
import Parse from "parse/node";
import {
  Button,
  Input,
  AppBar,
  Toolbar,
  IconButton,
  Typography,
  Box,
  Grid,
} from "@material-ui/core";

Parse.initialize(
  "7lgNpft2XSQJkk0dxf0oluQB7NtPTsNBp84opurx",
  "6mFJYrSwI7iYtYQAn4E1qJVLlf0LWd4i0nX4CP7F"
);

Parse.serverURL = "https://parseapi.back4app.com/";

const App = () => {
  const [email, changeEmail] = useState();
  const [metaEmail, changeMetaEmail] = useState();

  // let re = new RegExp(/[a-z]+@+[a-z]+.+[a-z]/);
  let re = new RegExp(/[a-z]/);

  const handleInput = (e) => {
    const { value } = e.target;
    changeMetaEmail(value);
  };

  useEffect(() => {
    if (email) {
      var Person = Parse.Object.extend("Person");
      var person = new Person();
      person.set("email", email);
      person.save();
    }
  }, [email]);

  const handleSubmit = () => {
    if (re.test(metaEmail)) {
      changeEmail(metaEmail);
    }
  };

  return (
    <div className="mainContainer">
      <AppBar position="static">
        <Toolbar variant="dense">
          <Typography>{email}</Typography>
        </Toolbar>
      </AppBar>
      <Grid container justify="center">
        <Box classes="inputArea" margin="2rem">
          <Grid container xs="10rem">
            <Input
              onChange={(e) => {
                handleInput(e);
              }}
            ></Input>
          </Grid>
          <Grid container justify="center">
            <Box margin="10px">
              <Button
                variant="contained"
                onClick={() => {
                  handleSubmit();
                }}
              >
                Submit
              </Button>
            </Box>
          </Grid>
        </Box>
      </Grid>
    </div>
  );
};

export default App;

改变状态挂钩被调用第二次函数被调用

1 个答案: