如何在Reactjs中从承诺到全球范围获得价值?

AtharvaKamble

我正在使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章