Question

这可能是一个非常愚蠢的问题，但我不了解React Hooks教程中的示例如何工作：

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

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

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

handleStatus中的setIsOnline使用的参数是否应命名为isOnline而不是status.isOnline，因为isOnline是状态的一部分（状态内没有status.isOnline这样的东西）？

Answer 1

handleStatusChange是传递给聊天API的函数：

 ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

ChatAPI在内部将使用status参数调用该函数。 status对象的格式由ChatApi定义。

处理程序正在响应事件：

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

并将status.isOnline中的ChatAPI的值设置为isOnline的新值。

Answer 2

更正状态内没有status.isOnline。但是，当handleStatusChange调用时，您从API传递了状态，该状态将在JSON对象中返回一个称为isOnline的布尔值。这就是status.isOnline的来源。

它们看起来像是伪造的API，用于炫耀Hooks功能。我认为响应中将包含以下内容：

status: {
  isOnline: true,
  chatData: {},
  otherData: {},
}

React挂钩中状态变量的名称

2 个答案: