如何检查fetch变量是否有数据

Question

  function Login() {

 const [email, setEmail] = useState("");
  const [password, setpassword] = useState("");

  const [users, setUser] = useState([]);

  function login() {
    fetch(
      "http://116.202.231.219:8069/Restaurant/Login_Updated?Cont4=" +
        email +
        "&Pswd=" +
        password
    ).then((result) => {
      result.json().then((resp) => {
        // console.warn(resp)
        setUser(resp);
        console.log(resp);
        });
    });
  }

  return (
    <div className="col-sm-6 offset-sm-3">
      <h1>Login Page</h1>
      <br />
      <input
        type="text"
        className="form-control"
        onChange={(e) => setEmail(e.target.value)}
      />
      <br />
      <br />
      <input
        type="password"
        className="form-control"
        onChange={(e) => setpassword(e.target.value)}
      />
      <br />
      <br />
      <button onClick={login} className="btn btn-primary">
        Login
      </button>
    </div>
  );
}

现在我想检查获取的数据是否与输入中的数据相同，所以我尝试使用“IF”，但“RESP”变量不是全局的，我的意思是它不适用于“IF” ”。那么你们能帮我检查一下电子邮件通行证是否等于 API 中的电子邮件通行证吗？

如您所见，API 正在获取 cont4 并从输入标签传递并返回对象，但我无法对此 API 运行成功检查，如果它返回对象，则转到仪表板，否则抛出错误警报

Answer 1

import axios from 'axios';
//add axios in your project

function Login() {

    const [email, setEmail] = useState("");
    const [password, setpassword] = useState("");
    const [users, setUser] = useState({});


    loginHandel = () => {
        const url = `http://116.202.231.219:8069/Restaurant/Login_Updated?Cont4=${email}&Pswd=${password}`
        axios.get(url).then((res) => {
            //check the res if its getting the correct data or not?
            //restructure accordingly
            console.log(res);
            const persons = res;
            if ((persons?.email === email) && (persons?.password === password)) {
                //perform any thing here
                setUser(persons);
            } else {
                console.log("User email and passwoed mismatched!")
            }
        }).catch(err => {
            //handel your error
            console.log(err);
        })
    }

    return (
        <div className="col-sm-6 offset-sm-3">
            <h1>Login Page</h1>
            <br />
            <form>
                
            </form>
            <input
                type="text"
                className="form-control"
                onChange={(e) => setEmail(e.target.value)}
            />
            <br />
            <br />
            <input
                type="password"
                className="form-control"
                onChange={(e) => setpassword(e.target.value)}
            />
            <br />
            <br />
            <button onClick={loginHandel} className="btn btn-primary">
                Login
         </button>
        </div>
    );
}