如何通过 ReactJS 中的功能组件正确传递数据？

Question

我是新手，这让我很困惑。任何帮助将不胜感激。

所以我有一个 Axios 拦截器，确保用户经过身份验证，但这不是问题，问题是拦截器的“.then()”部分。所以我试图将“res”传递给我的功能组件“Profile”，如下所示。

export function GetProfiles(history) {
    axiosInstance(history)
        .get('/profile')
        .then((res) => <Profile userData={UserProfile(res)} />)
        .catch((err) => console.log("err", err));
}

这就是我的“UserProfile(res)”函数的编写方法

function UserProfile(props) {
    let data = {
        firstName: props.data.firstName,
        lastName: props.data.lastName,
        email: props.data.email,
        phone: props.data.phone,
    };
    return { data };
}

export default UserProfile;

如果我在“UserProfile”中执行 console.log(data)，我会得到我需要的所有数据。所以一切都按预期工作。但是，当我尝试在“配置文件”组件中检索相同的数据时，我得到“未定义”。所以这就是我编写“个人资料”组件的方式

function Profile({ userData }) {
    console.log(userData);
}
export default Profile;

再次，非常感谢任何帮助，我是新手，所以很有可能我做错了。请指出正确的方向。

Answer 1

当您从 API 获取数据时，通常会将响应 (res) 分配给 变量，这样您就可以分隔 View（组件结构）来自 Data（来自 API 的用户信息）。因此，在您的情况下，您必须：

1. 定义一个变量来存储用户数据。
2. 之后，在 getProfile 函数中，将响应分配给变量。
3. 最后，将变量作为道具传递给您的组件。

您可以使用此代码作为示例：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [profileData, setProfileData] = useState();
 
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'yourapiurl/profile',
      );
 
      setProfileData(result.data);
    };
 
    fetchData();
  }, []);
 
  return (
    <>
      <Profile userData={profileData} />
    </>
  );
}
 
export default App;

在本例中，我使用 React Hooks，因此您在 useEffect 挂钩内进行 API 调用。我定义了一个名为profileData 的变量，我将在其中存储来自API 的数据。在fetchData 函数中，我调用了setProfileData 方法，因此您从API 获得的所有数据都将存储在profileData 变量中。最后，您将 profileData 作为 prop 传递给您的配置文件组件，它会在从您的 API 获取数据后立即更新。

我从这个链接获得了所有信息：

https://www.robinwieruch.de/react-hooks-fetch-data

如果您使用的是 Class Components 而不是 React Hooks，则过程非常相似，只是不用像这样定义变量：

const [profileData, setProfileData] = useState();

您必须将其定义为组件的状态：

state = {
    profileData: []
  }

有关如何在 React 类组件中使用 Axios 从 API 获取数据的更多信息，请访问以下链接：

https://www.digitalocean.com/community/tutorials/react-axios-react

我希望这些信息有用。

黑客愉快！

Answer 2

我认为您正在尝试将 UserProfile 编写为辅助函数，但它看起来像您拥有的函数组件。您可以在 .then 链中映射数据，然后再将其传递给您的 Profile 组件，即

let userData = userProfile(res);
return <Profile userData={userData} />