Question

这是我的React hooks代码
反应挂钩状态在某些函数中未更新
它是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]）中发生了什么，为什么会更新，这仅是因为数组计数[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

在countChange(count+1);函数之后，在getContent中使用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

反应钩子状态

2 个答案: