React - 调用 api 并导出值

Posted 2023-03-30

【中文标题】React - 调用 api 并导出值

【英文标题】：React - call api and export value

【发布时间】：2021-08-05 16:54:37

【问题描述】：

我正在学习 React，我以模板为例，我想更改菜单值。菜单是使用固定值创建的，我需要访问我的 API 并从数据库中获取值，但是当我尝试这样做时，我得到一个错误返回：

const LoadNavigation = async () => 
    return await axios.get('https://localhost:44362/api/SystemMenus').then(response => response.data);


var nav = LoadNavigation();

export const navigations = nav;

错误：

TypeError：传播不可迭代实例的无效尝试。 为了可迭代，非数组对象必须有一个 Symbol.iterator 方法。

如果我传递了固定的导出值 (json)，它会起作用：

export const navigations = [
    
        name: 'Home',
        path: '/dashboard',
        icon: 'home',
    ,
    
        label: 'Dashboards',
        type: 'label',
    ,
    
        name: 'Test 1',
        icon: 'trending_up',
        children: [
            
                name: 'Test 02',
                iconText: 'CP',
                path: '/test/test02',
            ,
            
                name: 'Test 03',
                iconText: 'FC',
                path: '/test/test03',
            ,
        ],
    ,
    
]

还有一点是我的 const 导出后调用了我的 API。

我该如何解决这两个问题，我找不到类似的或我能理解的。

我做了很多测试和修改代码，但我无法让它工作。

编辑 - 回答 @Giovanni Esposito

在这种情况下，它会发生并调用 API

从'axios'导入axios；

navigationsAPI.js

export const LoadNavigation = async () => 
    let response = await axios.get('https://localhost:44362/api/SystemMenus');
    return response.data;

导航.js

import React from 'react';
import  LoadNavigation  from 'app/navigationsAPI'

var nav = LoadNavigation();

export const navigations = nav;

错误：

TypeError：传播不可迭代实例的无效尝试。为了 要可迭代，非数组对象必须有 Symbol.iterator 方法。

编辑 - 回答 @Drew Reese

这种情况只发生错误，不调用API

navigationsAPI.js

import axios from 'axios';

export const LoadNavigation = () => 
    return axios.get('https://localhost:44362/api/SystemMenus')
        .then(response => response.data);

导航.js

import React from 'react';
import  LoadNavigation  from 'app/navigationsAPI'

const [nav, setNav] = React.useState([]);

React.useEffect(() => 
    LoadNavigation().then(setNav);
, []);


export const navigations = nav;

错误：

错误：无效的挂钩调用。钩子只能在体内调用 的一个功能组件。这可能发生在以下情况之一 原因：

您的 React 和渲染器版本可能不匹配（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用中拥有多个 React 副本

【问题讨论】：

LoadNavigation 是一个异步函数，所以它会返回 promise try using var nav=LoadNavigation.then(response => (return response))

我尝试删除 async 和 await ，结果是一样的。我尝试按照您的提示进行操作，但出现语法错误，错误是 (return response)。这是在 LoadNavigation 方法之后吗？

【参考方案1】：

你也可以采用这种方式：

navigationsAPI.js

import axios from 'axios';   

export const LoadNavigation = async () =>   
  let response = await axios.get('https://localhost:44362/api/SystemMenus');
  return response.data;

在任何需要加载导航的组件中：

import React,  useState, useEffect  from 'react';
import  LoadNavigation  from './navigationsAPI'

const Component = () => 
   const [navigation, setNavigation] = useState();

   useEffect(() => 
      LoadNavigation().then(response => setNavigation(response));
      
   , []);

   return (...);

【讨论】：

Giovanni Esposito，我试图效仿你的例子，但我遇到了同样的初始问题。我编辑了帖子以进行演示。如果您有其他解决方案，谢谢

@user8223022 我看到了你的编辑，我想也许我不清楚。让我编辑我的答案。

对不起我的无知，我试图理解这一切，但是当我按照你的例子进行操作时，会出现与 Drew Reese 示例相同的问题，如它在原始帖子中。错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用

@user8223022 很可能是因为您在组件外部调用useEffect。这对于 React 是强制性的，否则你会得到这个错误。如果你不知道什么是组件，你可以阅读this

实际上发生了错误const [navigation, setNavigation] = useState();。但是原因也是因为它在组件之外吗？

【参考方案2】：

除非您的系统和浏览器支持top-level await（或类似的行为），否则不可能在导出navigations 之前让代码等待响应和处理。无论如何，这可能不是您想要做的。

要正常处理这个问题，您可以导出LoadNavigation 函数，并使用本地navigations 状态变量和安装效果来获取和加载菜单数据。

export const LoadNavigation = () => 
  return axios.get('https://localhost:44362/api/SystemMenus')
    .then(response => response.data);

在消费组件中；

const MyComponent = () => 

  const [navigations, setNavigations] = React.useState([]);

  React.useEffect(() => 
    LoadNavigation().then(setNavigations); // *
  , []);

  ...

* 注意： 这里LoadNavigation().then(setNavigations); 将setNavigations 函数作为.then 回调传递，但如果更清楚，您可以使用匿名回调并代理响应数据.

React.useEffect(() => 
  LoadNavigation().then(data => setNavigations(data));
, []);

【讨论】：

Drew Reese，我按照你的例子，对我来说有点复杂，除了最初的错误，我还有另一个错误，但是这次没有调用 API，我还能做什么？我编辑了帖子以展示结果。谢谢

@user8223022 您不能在函数组件（或自定义挂钩）之外调用 React 挂钩。抱歉，我假设你了解 React 钩子的工作原理。见Introducing Hooks。我会更新我的答案，以明确这一点。