React 如何将道具从 api 传递给组件？

Question

我有一个 parentA 和 childB 组件，我希望它单击 parentA 中的按钮，然后执行 function 以从 api 获取数据，然后显示在 B 组件上。 这似乎很简单。

家长：

  let profileData = {
    avatar: '',
    first_name: 'hey',
     ...
  };

const handleClickProfileOpen = () => {
  setIsProfileOpen(true);
   getProfileData();
};

  const getProfileData = async() => {
    let res;
    try {
      res = await....;
      if (res.code === 200) {
        profileData = res.data.data;
        ...
      } else {
        ...
      }
    } catch...
  };

return (
 <>
  <UserInfo openProfilePage={ handleClickProfileOpen } />
  <Profile profileData={profileData} />
 </>
)

孩子（个人资料）

export default function Profile({profileData}) {
 return (
  <>
    <p>{profileData.first_name}</p>
  </>
)}

我运行它，当调用 API 时，profileData 不会重新渲染，last_name 总是“嘿”，我在 getProfileData 代码 === 200 中尝试了 setState，但导致错误

无法对未安装的组件执行 React state 更新。

我是一个新的 React 程序员，如果你回答，我很感激。

Answer 1

假设你使用的是功能组件，你可以使用 react 中的useState ，参考https://reactjs.org/docs/hooks-state.html

例如，

function ParentComponent() {
const [profileData, setProfileData] = useState({
    // default value if you needed, otherwise use `null` 
    avatar: '',
    first_name: 'hey',
     ...
})

const handleClickProfileOpen = () => {
  setIsProfileOpen(true);
   getProfileData();
};

  const getProfileData = async() => {
    let res;
    try {
      res = await....;
      if (res.code === 200) {
        setProfileData(res.data.data);
        ...
      } else {
        ...
      }
    } catch...
  };

  return (
    <>
      <UserInfo openProfilePage={ handleClickProfileOpen } />
      <Profile profileData={profileData} />
    </>
  )
}

以上是处理简单反应state的最简单方法，当您state变得更复杂时，您可以找到其他state管理库。