javascript - 错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。请帮我解决这个错误
问题描述
import React, { useState } from "react";
const Regsiterme = () => {
const [name, setName] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
async function signUp() {
let item = { name, password, email };
let result = await fetch("http://127.0.0.1:8000/api/userRegister", {
method: "POST",
body: JSON.stringify(item),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
result = await result.json();
localStorage.setItem("user-info", JSON.stringify(result));
}
return (
<>
<h1 className="text-center">Regsiter Form</h1>
<div class="mb-3 col-sm-6 offset-sm-3">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
class="form-control"
placeholder="Enter Your Full Name"
/>
<br /> <br />
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
class="form-control"
placeholder="Enter Your Password"
/>
<br /> <br />
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
class="form-control"
placeholder="Enter Your Email"
/>
<br /> <br />
</div>
<div class="mb-3 col-sm-6 offset-sm-3">
<button onClick={signUp} type="submit" class="btn btn-primary">
Submit
</button>
</div>
</>
);
};
export default Regsiterme;
解决方案
钩子只能在功能组件中使用。我认为调整您声明注册的方式应该可以解决您的问题。
import React, { useState } from "react";
const Regsiterme = () => {
const [name, setName] = useState("");
const [password, setPassword] = useState("");
const [email, setEmail] = useState("");
const signUp = async () => {
let item = { name, password, email };
let result = await fetch("http://127.0.0.1:8000/api/userRegister", {
method: "POST",
body: JSON.stringify(item),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
result = await result.json();
localStorage.setItem("user-info", JSON.stringify(result));
}
return (
<>
<h1 className="text-center">Regsiter Form</h1>
<div class="mb-3 col-sm-6 offset-sm-3">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
class="form-control"
placeholder="Enter Your Full Name"
/>
<br /> <br />
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
class="form-control"
placeholder="Enter Your Password"
/>
<br /> <br />
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
class="form-control"
placeholder="Enter Your Email"
/>
<br /> <br />
</div>
<div class="mb-3 col-sm-6 offset-sm-3">
<button onClick={signUp} type="submit" class="btn btn-primary">
Submit
</button>
</div>
</>
);
};
export default Regsiterme;
推荐阅读
- php - php mysql 加入两个表以加入一些列并联合一些列
- javascript - 使用 HTML5 和 JavaScript 暂停后,如何恢复播放来自网络源的音频?
- python - jinja2 模板中的 \n 会产生问题吗?
- javascript - 文件由 resteasy 返回,带有额外的字节
- java - 将所需变量传递给所有代码的最佳设计模式
- spring - Spring Cloud Data Flow REST API 组成的任务参数未传递给子任务
- php - ajax 调用返回 NULL
- google-cloud-platform - 如何在具有多个 for 循环的 Airflow DAG 中构建动态工作流?
- r - 如何更改数据框的格式
- ios - Xcode 错误:“'AppDelegate' 类型的值没有成员 'receiveBatteryLevel' Flutter 官方 Flutter 平台频道示例