反应钩子状态

Question

这是我的反应钩子代码
反应钩子状态没有更新在某个函数中，
它在useEffect(((=>{...}，[count](中更新，
但它没有在getContent中更新
我不知道为什么这个状态没有更新 如果我打印一个计数，它会在useEffect中打印，但getContent((不是

const [content,contentChange] = useState([]);
const [count,countChange] = useState(0);
useEffect(()=>{console.log(count)},[count])
const getContent = () => {
axios.get(`http://10.156.147.200:3000/api/main/post/${count}`,{
headers:{
"x-access-token":access_token,
}
})
.then((res)=>{
const newData = res.data.post;
let buffer;
buffer = newData.map((e)=>{ 
return {
isMine:e.isMine,
isLike:e.isLike,
content:e.post.content,
nick:e.post.nick,
img:e.post.img,
id:e.post._id,
profile:e.profile,
}
})
contentChange([...content,...buffer]);
})
.catch((err)=>{
if(err.response.status === 403){
refreshAccessToken();
}
})
}
const scrollEvent = () => {
const { innerHeight } = window;
const { scrollHeight } = document.body;
const scrollTop =
(document.documentElement && document.documentElement.scrollTop) ||
document.body.scrollTop;
if (scrollHeight - innerHeight - scrollTop < 10) {
getContent();
countChange(count+1);
}
}

Answer 1

只是因为getContent在计数状态更改之前首先运行，尝试在getContent((中添加setTimeout。 在useEffect(((=>{....}，[count](中会发生什么，为什么它被更新只是因为数组计数[计数].。如果计数更改，则再次运行代码 因此，它仅在计数更改时运行，而 getContent 在计数仍处于其先前状态时运行。 https://reactjs.org/docs/hooks-effect.html

const getContent = () => {
setTimeout(()=> {
//fetching data
}, 1000) // try to modify it 
}

或者试试这个

useEffect(() => {
axios.get(`http://10.156.147.200:3000/api/main/post/${count}`,{
headers:{
"x-access-token":access_token,
}
})
.then((res)=>{
const newData = res.data.post;
}
}, [count])

你应该调用 countChange(count+1(; 在 getContent((;

Answer 2

在getContent 中使用countChange(count+1);在像这样contentChange函数后

const getContent = () => {
axios.get(`http://10.156.147.200:3000/api/main/post/${count}`,{
headers:{
"x-access-token":access_token,
}
})
.then((res)=>{
const newData = res.data.post;
let buffer;
buffer = newData.map((e)=>{ 
return {
isMine:e.isMine,
isLike:e.isLike,
content:e.post.content,
nick:e.post.nick,
img:e.post.img,
id:e.post._id,
profile:e.profile,
}
})
contentChange([...content,...buffer]);
countChange(count+1); //add line
})
.catch((err)=>{
if(err.response.status === 403){
refreshAccessToken();
}
})
}

并在滚动事件中删除countchange