Reactjs 从API检索数据的简单函数不返回数据

我有一个React组件，用于返回如下HTML元素：

const PartsList = () => {

    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://localhost:44376/api/parts',
            );
            setData(result.data);
        };
        fetchData();
    }, []);

    return (
        <>
            {data.map((item, index) => (
                <label key={index} className="inline">
                    <Field key={index} type="checkbox" name="machineParts" value={item.id} />
                    {item.name}
                </label>
            ))}
        </>

    );
}
export default PartsList;

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

const [data, setData] = useState([]);

useEffect(() => {
  const fetchData = async () => {
    const result = await axios(
      'https://localhost:44376/api/machines',
    );
    setData(result.data);
    console.log("data as seen in function: ", JSON.stringify(result, null, 2));
  };
  fetchData();
}, []);

return data;

当我在这个函数中将它写到控制台时，我看到了所有需要的数据

但当我在主App.js中将其写入控制台时，我只看到未定义

我可能做错了什么

---

谢谢

最初您需要一个组件，因为它必须呈现HTML

现在你真正需要的是把所有的东西移到一个函数中

因此，您可以在主

App.js中执行此操作：

import React from 'react';
import axios from 'axios';

const fetchData = async () => {
  const result = await axios(
    'https://localhost:44376/api/machines',
  );
  return JSON.stringify(result, null, 2);
};

const App = () => {
  const result = await fetchData()
  console.log(result)

  return <div>Main App<div>
}

export default App

从“React”导入React；
从“axios”导入axios；
const fetchData=async（）=>{
常量结果=等待axios(
'https://localhost:44376/api/machines',
);
返回JSON.stringify（结果，null，2）；
};
常量应用=（）=>{
const result=await fetchData（）
console.log（结果）
返回主应用程序
}
导出默认应用程序

这就是如何创建一个函数来返回数据，您可以调用该函数来查看主应用程序组件中的控制台结果

这显然只是演示了这个概念，您可以将该函数移到自己的文件中，然后导入到
App.js
文件夹中。
useffect是一个生命周期函数。如果它不在一个组件中，它将不会做任何事情。@BarryMichaelDoyle所以我可以安全地删除它？我试着使用新的钩子。知道钩子是如何工作的很重要，有很多地方可以使用它们。本案并非如此。钩子有特定的用途。useEffect用于在组件挂载和卸载以及某些道具更改时运行代码（您在钩子依赖项中设置）。多读一读。这里的用例不需要挂钩。一个钩子“钩住”一个组件，它们不能独立工作，让你去尝试。哦，好吧，所以我认为我唯一做错的事情就是使用了“useEffect”钩子？嗨，我尝试了你的方法，但它似乎没有以正确的格式返回我的数据。根据我的控制台，它返回的是一个“承诺”，这会在应用程序的后面导致类似“TypeError:data.map不是函数”的错误，我猜这是因为它返回的是承诺，而不是它所需要的真正的JSON数组。