我无法获取 Axios 发布的信息。

huangapple go评论68阅读模式
英文:

I can't get Axios post information

问题

对于我的帖子。在 AboutUsers.jsx 组件中。

   const [users, setUsers] = useState([]);

如果我这样写,它是有效的,我在用户中看到帖子。

在 AboutUsers.jsx 组件中

    useEffect(() => {
        const getUsers = 
        axios.get('https://jsonplaceholder.typicode.com/todos',{
            params:{
                _limit:limitPage,
                _page:currentPage
            }
        })
            .then(response => setUsers(response.data))
    },[])

但我创建了另一个名为 PostMyServise.js 的组件:

    export default class PostMyServise {
        static async getPost(limit=10, page=1) {
            const result  = await 
        axios.get('https://jsonplaceholder.typicode.com/todos',{
                params: {
                    _limit: limit,
                    _page: page,
                }
        })
                .then(response => {
                    return response
                })
            return result;
        }
    }

还有一个组件 useCreatePosts.js:

    export const usePosts = (callback) => {
       const [isTrue, setIsTrue] = useState('')
       const [error, setError] = useState('')

       const createPost = async () => {
           try {
               setIsTrue(false);
               await callback;
           } catch (e) {
                   setError(e.message);
           } finally {
                   setIsTrue(true);
           }
       }
    return [createPost, isTrue, error];
    }

    export default usePosts;

我写了这个,但是我在控制台中看到空数组:
我不明白为什么数组是空的。

    const [createPost, isTrue, error] = usePosts (async () => {
    const response = await PostMyServise.getPost(limitPage, currentPage);
        setUsers(response.data)
    })

    useEffect(() => {
            createPost();
    },[currentPage])
英文:

For my posts.
In component AboutUsers.jsx.

   const [users, setUsers] = useState([]);

If I write like this, it's working, I see posts in users.

in component AboutUsers.jsx

    useEffect(()=> {
        const getUsers = 
        axios.get('https://jsonplaceholder.typicode.com/todos',{
            params:{
                _limit:limitPage,
                _page:currentPage
            }
        })
            .then(response => setUsers(response.data))
    },[])

But I created other component PostMyServise.js with:

    export default class PostMyServise {
        static async getPost(limit=10, page=1) {
            const result  = await 
        axios.get('https://jsonplaceholder.typicode.com/todos',{
                params: {
                    _limit: limit,
                    _page: page,
                }
        })
                .then(response => {
                    return response
                })
            return result;
        }
    }

And one yet component useCreatePosts.js:

    export const usePosts = (callback) => {
       const [isTrue, setIsTrue] = useState('')
       const [error, setError] = useState('')

       const createPost = async () => {
           try {
               setIsTrue(false);
               await callback;
           } catch (e) {
                   setError(e.message);
           } finally {
                   setIsTrue(true);
           }
       }
    return [createPost, isTrue, error];
    }

    export default usePosts;

I wrote this, and I see empty array in console.log(users):
I don't understand why array is empty

    const [createPost, isTrue, error] = usePosts (async ()=> {
    const response = await PostMyServise.getPost(limitPage, currentPage);
        setUsers(response.data)
    })

    useEffect(() => {
            createPost();
    },[currentPage])

答案1

得分: 0

你没有调用 callback。你需要添加括号。

const createPost = async () => {
   try {
       setIsTrue(false);
       await callback();
   } catch (e) {
           setError(e.message);
   } finally {
           setIsTrue(true);
   }
}

我觉得你的代码中有些部分过于复杂,超出了问题的范围。这个更改至少可以让它正常工作。此外,我建议将 isTruesetIsTrue 的名称更改为更有意义的内容,因为这些名称并不告诉你它们的用途。

英文:

You are not calling the callback. You need to add the parentheses.

   const createPost = async () => {
       try {
           setIsTrue(false);
           await callback();
       } catch (e) {
               setError(e.message);
       } finally {
               setIsTrue(true);
       }
   }

I feel like something about your code is over-engineered and too complex but that's outside the scope of the question. This change will at least get it working. Also, I suggest changing the name of isTrue and setIsTrue to something more meaningful as those names do not tell you what they are for.

huangapple
  • 本文由 发表于 2023年2月18日 20:00:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75493197.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定