使用(表单-Onsubmit&调用API不能正常工作)

Question

在阅读下面的代码时，我对逻辑有点困惑，虽然代码正在工作，但并不完全按照我所希望的那样运行。

3我有疑问，如果有人能请澄清。

1-据我所知，useEffect用于在呈现后调用函数，但在下面的代码中，一旦表单被加总(onSubmit={credentialVerify})，它将按下面的方式调用credentialVerify()函数，因此我认为这里不需要useEffect，但除非我使用useEffect语句，否则代码不会调用useEffect。

2-也不需要我先输入我的信用记录，一旦我进入登录页面，它就会获取API (当使用useEffect时)，并在窗口中显示结果，但是我尝试以一种方式进行设计，当我单击按钮时，它就会获取API

3-当以onsubmit的形式调用credentialVerify函数时，我有console.log(e)，但它显示为未定义的，但据我所知，onsubmit将调用该函数并默认情况下通过事件参数。

下面是我的代码片段。

任何帮助都很感激。

import React, { useState, useEffect } from "react";
    import "../App.css";
    import { Link } from "react-router-dom";

    function Signin() {
      const [name, setName] = useState("");
      const [password, setPassword] = useState("");
      const updateName = (e) => {
        setName(e.target.value);
      };
      const updatePassword = (e) => {
        setPassword(e.target.value);
      };
      const [items, setItems] = useState([]);
      useEffect(() => {              //Point-1  useEffect- API not call atall without this statement
        credentialVerify();
      }, []);
      const credentialVerify = async (e) => {
        console.log(e);                                         //Point-3 this is coming as undefined
        const data1 = await fetch("http://localhost:5000/api/customers");
        const incomingdata = await data1.json();
        console.log(data1);
        console.log(incomingdata);
        console.log(name, password);
        setItems(incomingdata);
      };
      return (
        <div>
          <div>
            {
              <form className="formstyle" onSubmit={credentialVerify}>
                <input
                  type="text"
                  placeholder="Username"
                  name="username"
                  value={name}
                  onChange={updateName}
                />
                          
                <input
                  type="text"
                  placeholder="Password"
                  name="password"
                  value={password}
                  onChange={updatePassword}
                />
                <button type="submit">Submit</button>
              </form>
            }
          </div>
          <div>
           
            {items.map((entry) => {
              let key = entry.email;
              let valuefirst = entry.firstName;
              let valuelast = entry.created_at;
            
              return (
                <p key={key}>
                  {key}: {valuefirst}bb {valuelast}
                </p>
              );
            })}
          </div>
        </div>
      );
    }
    export default Signin;

Answer 1

对于 first 问题，您是正确的--当组件第一次呈现时调用credentialVerify是没有意义的，因为这似乎是表单提交时的处理程序。除非在显示表单之前获取数据，否则可以完全删除useEffect钩子。

这也解决了您的第二个问题，因为当组件第一次呈现时，钩子将运行一次，这是由用作useEffect钩子的依赖数组的空数组[]所指示的。这相当于componentDidMount组件中的class-based，但同样地，此时调用credentialVerify是没有意义的。

至于您的第三个问题，您可能应该执行如下操作：

const credentialVerify = event => {
  event.preventDefault();

  (async () => {
    const data = await fetch("http://localhost:5000/api/customers")
      .then(res => res.json());
      .catch(e => e);
    console.log(incomingData);
    // ...
  })();
}

由于要将异步函数作为事件处理程序传递，因此由于SyntheticEvent文档中所述的原因，可能会出现访问React对象的问题：

SyntheticEvent是集合的。这意味着在调用事件回调之后，SyntheticEvent对象将被重用，所有属性都将为空。这是出于性能原因。因此，您不能以异步方式访问该事件。

• Reactjs.org/docs/vents.html#事件池

最后一个组件应该如下所示：

function Signin() {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [items, setItems] = useState([]);
  const updateName = e => {
    setName(e.target.value);
  };
  const updatePassword = e => {
    setPassword(e.target.value);
  };
  const credentialVerify = event => {
    event.preventDefault();

    (async () => {
      const incomingdata = await fetch("http://localhost:5000/api/customers")
        .then(res => res.json())
        .catch(e => e);
      console.log(incomingdata);
      console.log(name, password);
      setItems(incomingdata);
    })();
  };
  return (
    <div>...</div>
  );
}