React hooks state

Question

this is my react hooks code
react hooks state is not update in something function
it is update in useEffect(()=>{...},[count])
but it was not update in getContent
i don't know why this state is not update if i print a count, it print right in useEffect, but getContent() is not

        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);
        }
    }

no more `useeffect` hooks in above code – prasanth Jan 04 '20 at 10:52 — prasanth, Jan 04 '20 at 10:52

score 2 · Answer 1 · answered Jan 09 '20 at 04:43

it is just because the getContent run first before the count state change try to add setTimeout in getContent() what happens in useEffect(()=> {....}, [count]) why it is updated it is only because of array count [count] .. runs the code again if count change so it only runs when count change while getContent run while the count is still in its previous state. https://reactjs.org/docs/hooks-effect.html

  const getContent = () => {

    setTimeout(()=> {
        //fetching data

    }, 1000) // try to modify it 

  }

or try this

     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])

You should call countChange(count+1); before getContent();

score 1 · Accepted Answer · answered Jan 04 '20 at 11:52

Use countChange(count+1); inside the getContent after contentChange function like this

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();
            }
        })
    }

And remove countchange in scroll event

React hooks state

2 Answers2