反应挂钩状态

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

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

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

Answer 2

只是因为getContent运行在计数状态变化之前首先尝试在getContent()中添加setTimeout useEffect(()=> {....}, [count]) 中发生了什么为什么更新它只是因为数组计数 [count] .. 运行s 如果计数改变再次代码所以它只有运行s 当计数发生变化而 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() 之前；

反应挂钩状态

React hooks state

reactjs

react-hooks

react-state