reactjs - 状态挂钩不会从 useEffect 函数调用中更新
问题描述
在 useEffect 中,我调用 getPins 来查询数据库中的引脚。然后我循环遍历引脚并尝试减少“pinsRemaining”,这是一个状态钩子。
在状态下,它显示钩子减少了,但它在代码中不起作用。当我从 getPinnedLocations() 控制台记录 pinRemaining 时,它总是相同的数字。
有趣的是,如果我将 'pinsRemaining' 设为 const 变量(不是状态挂钩),它确实可以减少计数器,但这会产生其他问题。
我不确定如何让这段代码工作。我在这里读过状态钩子是如何异步的
我试过像这样添加一个空的 useEffect 钩子,但它不起作用
useEffect(() => {}, [pinsRemaining])
也许我需要在这里面做点什么?
这是我的完整代码。
const [pinsRemaining, setPinsRemaining] = useState(5)
useEffect(() => {
if (isLoggedIn && user !== {}) {
APIService.getAccountById(
Number(id)
).then(_user => {
setUser(_user)
getPins(_user)
}).catch(err => {
console.log("error", err)
})
}
}, []);
const getPins = (_user) => {
APIService.getPinsForUser(_user.id).then(pins => {
pins.map(pin => {
pushPinnedLocation(pin.location_id, _user)
})
})
}
const pushPinnedLocation = (location, date, _user) => {
//decrementing in hook doesn't work here
setPinsRemaining((prevState)=> prevState - 1)
//but decrementing with var does
pins = pins - 1
console.log("state hook", pinsRemaining)
console.log("const var", pins)
setLocationDateMap(new Map(locationDateMap.set(location, date)))
if(pinsRemaining === 0){
getMatchesFromDB(_user)
}
}
const getMatchesFromDB = (_user) => {
let pinsArray = Array.from(locationDateMap)
pinsArray.map(obj => {
let location = obj[0]
let date = obj[1]
let locationDate = date + "-" + location
let dbMatches;
let params = {
location_date_id: locationDate,
user_id: _user.id,
seeking: _user.seeking
}
APIService.getMatchesByLocationDateId(params).then(data => {
dbMatches = data.map((match, i) => {
if(match.likes_recieved && match.likes_sent
&& match.likes_recieved.includes(_user.id + "")
&& match.likes_sent.includes(_user.id + "")){
match.connectedStatus = 3
}else if(match.likes_recieved && match.likes_recieved.includes(_user.id + "")){
match.connectedStatus = 2
}else if(match.likes_sent && match.likes_sent.includes(_user.id + "")){
match.connectedStatus = 1
}else{
match.connectedStatus = 0
}
match.name = match.user_name
return match
})
}).then(() => {
setMatches(matches => [...matches, ...dbMatches]);
})
})
}
解决方案
推荐阅读
- java - 对分区的循环消息分配不适用于没有密钥的消息
- r - 处理 R 中连接的多个表的最佳方法是什么?
- c++ - 为什么有些代码可以工作 HackerRank 而不是 Xcode
- java - 在另一个 JPanel 中将具有布局 GridLayout 的 JPanel 居中
- android - 如何在switch语句中分配变量?
- node.js - 使用 prismjs 生成静态 html - 如何启用行号?
- laravel - 如果所有数据彼此不相关,如何在单页中调用多表数据
- npm - 未知选项:.presents,Entrypoint undefined = index.html,导入在 index.js 文件中不起作用
- python - 我从 Pyinstaller 转换的 .exe 文件无法运行
- java - 如何通过前端网页从远程机器访问托管服务器文件目录