如何将 axios 响应传递给函数

Question

我尝试这段代码并得到无限循环

请求.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
  })

我也尝试放置 useEffect 并收到此错误

react-dom.development.js:15408 未捕获（承诺中）错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本 请参阅 https://reactjs.org/link/invalid-hook-call 了解有关如何调试和解决此问题的提示。<

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

Answer 1

你已经极大地使这件事变得过于复杂了。 我不知道您正在遵循哪些示例，但看起来您正在尝试在编写的每个函数中使用您所知道的所有可能的操作。 不要。

如果

getCategories()

发出 AJAX 请求并返回响应，那么就这样做。 没有理由在其中涉及任何有关 React 的内容。 例如：

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

然后在 React 组件中使用它来获取数据并将该数据分配给状态：

const [categorieSelect, setCategorieSelect] = useState();

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

这个

useEffect

将在组件首次加载时执行一次。