时间戳

首页 > 解决方案 > 是一个使用仅返回api响应的useeffect的函数可以在另一个组件的方法中调用吗？

reactjs - 是一个使用仅返回api响应的useeffect的函数可以在另一个组件的方法中调用吗？

问题描述

我刚刚阅读了 react useEffect 的文档，他们举了这个例子

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

function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);

useEffect(() => {
function handleStatusChange(status) {
  setIsOnline(status.isOnline);
}

ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
  ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});

if (isOnline === null) {
  return 'Loading...';
}
 return isOnline ? 'Online' : 'Offline';
}

根据这个例子，我可以在其他组件的任何方法中使用它吗？如果是，那怎么办？我是否必须使该方法异步。

标签： reactjsuse-effect

解决方案

是的，您将始终使用异步函数进行 API 调用，但在这种情况下，由于 API 调用位于 useEffect 内部，并且请求是在页面呈现后发出的，所以没有问题。Async 方法在其他方法之后使函数加载，而 useEffect 已经具有这种效果。

推荐阅读