我正在使用React中的Web令牌进行用户身份验证。我正在使用CORS向后端fetch()
提出POST
请求。尝试在中使用setToken()
钩子.then()
会出现错误。我尝试将令牌存储到另一个变量,并setToken()
在promise之外使用,但无济于事。这是代码:
const [ token, setToken ] = useState('')
// Configuration for POST fetch method
const url = 'http://localhost:8080/users/login'
const requestOptions = {
method: 'POST',
headers: { 'Content-type': 'application/json' },
body: JSON.stringify(userData)
}
let tempToken = ''
fetch(url, requestOptions)
.then(res => res.json())
.then(data => {
tempToken = data.token
// console.log(tempToken) // DEBUG
})
.catch(e => console.log(e))
setToken(tempToken)
// console.log(token) // This logs default value of token, which is ''
这都在函数内部。这是怎么了?也有另一种方法可以做到这一点,非常感谢。谢谢。
我的问题是什么:无法token
从承诺中提取。
PS:另外,在另一个完全不同的音符上,我尝试使用异步等待,但是它给出了响应(如下所示),在这里我什至找不到json的正文。因此使用.then()
Response {type: "cors", url: "http://localhost:8080/users/login", redirected: false, status: 200, ok: true, …}
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "cors"
url: "http://localhost:8080/users/login"
__proto__: Response
Fetch
返回a promise
,您需要等待获取令牌,然后再使用setToken
。此外,您直接调用提取并甚至在渲染之前更新状态,这可能会导致warnings/side effects
。您可以使用useEffect挂钩来调用api并更新状态
useEffect(() => {
const url = 'http://localhost:8080/users/login'
const requestOptions = {
method: 'POST',
headers: { 'Content-type': 'application/json' },
body: JSON.stringify(userData)
}
fetch(url, requestOptions)
.then(res => res.json())
.then(data => {
setToken(data.token)
})
.catch(e => console.log(e))
}, [])
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句