javascript - How to pass a axios response to a function - Stack Overflow

admin管理员组

文章数量:1332339

I try this code and get an infinite loop

request.jsx

import { useEffect, useState } from 'react';
import axios from 'axios';

export async function getCategories() {
    const [categories,setCategories]= useState();
    try {
       await useEffect(() => {
            axios.get("http://localhost:3001/api/req/categories",).then(function (res) {
                const response = JSON.stringify(res.data)
                setCategories(response);
            });
    
            
   
    
        }, [])
            return categorias;
    } catch (error) {
        console.log(error);
    }

}

item_new.jsx

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      const res = JSON.parse(response);
     
      setCategorieSelect(res)

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

I also try to put a useEffect and get this error

react-dom.development.js:15408 Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See for tips about how to debug and fix this problem.<

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      useEffect(()=>{   
      
       const res = JSON.parse(response);
       setCategorieSelect(res)

   },[])
   

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

I try this code and get an infinite loop

request.jsx

import { useEffect, useState } from 'react';
import axios from 'axios';

export async function getCategories() {
    const [categories,setCategories]= useState();
    try {
       await useEffect(() => {
            axios.get("http://localhost:3001/api/req/categories",).then(function (res) {
                const response = JSON.stringify(res.data)
                setCategories(response);
            });
    
            
   
    
        }, [])
            return categorias;
    } catch (error) {
        console.log(error);
    }

}

item_new.jsx

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      const res = JSON.parse(response);
     
      setCategorieSelect(res)

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

I also try to put a useEffect and get this error

react-dom.development.js:15408 Uncaught (in promise) Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs./link/invalid-hook-call for tips about how to debug and fix this problem.<

import { getCategories } from ".request";
import { useEffect, useState } from "react";
const [categorieSelect, setCategorieSelect] = useState();

getCategories().then(response => {
    
    try {
      useEffect(()=>{   
      
       const res = JSON.parse(response);
       setCategorieSelect(res)

   },[])
   

    } catch (error) {
      console.log(error)
    }
 console.log(categorieSelect)  // infinite loop
  })

• javascript
• reactjs
• react-hooks
• axios

Share Improve this question Follow asked Nov 20, 2024 at 19:47 SodroSodro 111 silver badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

You've drastically over-complicated this. I don't know what examples you're following, but it looks like you're trying to use every possible operation you know of in every function you write. Don't.

If getCategories() makes an AJAX request and returns a response then just do that. There's no reason to involve anything about React in this. For example:

export async function getCategories() {
  const res = await axios.get("http://localhost:3001/api/req/categories");
  return res.data;
}

Then use it in your React component to fetch data and assign that data to state:

const [categorieSelect, setCategorieSelect] = useState();

useEffect(() => {
  getCategories().then(cat => setCategorieSelect(cat));
}, []);

This useEffect will execute once when the component first loads, due to its empty dependency array.

本文标签： javascriptHow to pass a axios response to a functionStack Overflow