如何在reactjs中从承诺到全局范围获得值?

Question

我正在react中使用web令牌进行用户身份验证。我使用fetch()使用CORS向我的后端发出POST请求。试图在.then()中使用setToken()钩子会出现错误。我尝试将令牌存储到另一个变量，并在承诺之外使用setToken()，但无济于事。下面是代码:

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 ''

这些都在函数内部。这里出了什么问题?也有其他的方法做到这一点，非常感谢。谢谢。

我的问题是:无法从promise中提取token.

p。S:另外，在一个完全不同的注意，我尝试使用async等待，但它给出了一个响应(如下所示)，在那里我甚至找不到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

Answer 1

Fetch返回promise，您需要等待获得令牌然后使用setToken。此外，您直接调用fetch，甚至在呈现之前更新状态，这可能导致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))
}, [])