如果这是一个愚蠢的问题,我很抱歉,但我刚刚学习 React 和 useState。我有下面的代码作为注册功能。POST
当向 提供用户名和密码时API
,会返回一条消息以及一个令牌。
import { useState } from "react";
const API_URL = '';
export default function SignUpForm() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState(null);
async function handleSubmit(event) {
event.preventDefault();
try {
const response = await fetch(API_URL, {
method: "POST",
body: JSON.stringify({
username:username,
password:password,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
const result = await response.json();
console.log(result);
//Attempting to use state function to grab token and store it.
setToken(result.token);
console.log(token)
} catch (error) {
setError(error.message)
}
}
return (
<>
<h2>Sign Up!</h2>
{error && <p>{error}</p>}
<form onSubmit={handleSubmit}>
<label>
Username: <input value={username} onChange={(e) => setUsername(e.target.value)}/>
</label>
<label>
Password: <input value={password} onChange={(e) => setPassword(e.target.value)}/>
</label>
<button>Submit</button>
</form>
</>
);
}
我正在尝试使用下面的文件useState
中的App.jsx
:
const [token, setToken] = useState(null);
来设置令牌。
import './App.css'
import SignUpForm from './components/SignUpForm'
import Authenticate from './components/Authenticate'
import { useState } from 'react';
function App() {
const [token, setToken] = useState(null);
return (
<>
<SignUpForm token={token} setToken={setToken} />
<Authenticate token={token} setToken={setToken} />
</>
);
}
export default App
我被告知“setToken
从 解构函数props
”。但我不知道这意味着什么。我不确定是否需要useState
在当前文件中创建另一个相同类型的文件。我该如何解构setToken
?有人可以帮我解决这个问题或为我指出正确的方向吗?任何帮助是极大的赞赏!
另外,如果有人问,API_URL
是否有价值,我只是出于安全原因将其取出。