聊天应用从Node后端获取好友数据后无法在前端展示求助

我正在开发聊天应用项目，目前遇到从Node后端获取好友数据的问题：控制台能正常打印好友数据，但前端无法展示，当前浏览器显示“No Friend”。

Context与状态管理代码 #

export const Messenger = () => {
  // Context State
  const { friends, setFriends, authInfo } = useAuth();
  const [loggedUser, setLoggedUser] = useState();
  const { updateNotification } = useNotification();

  const fetchMessengerUsers = async () => {
    try {
      const token = getToken();
      const config = {
        headers: {
          authorization: "Bearer " + token,
        },
      };
      const { data } = await client("/get-friends", config);
      console.log(data);
      setFriends(data);
    } catch (error) {
      updateNotification("error", "Failed To load the Chat");
    }
  };
  useEffect(() => {
    setLoggedUser(localStorage.getItem("auth-token"));
    fetchMessengerUsers();
  }, []);

前端渲染代码 #

<div className="friends">
          {friends && friends.length > 0
            ? friends.map((fd) => (
                <div className="hover-friend">
                  <Friends friend={fd} />
                </div>
              ))
            : "No Friend"}
        </div>

排查方向与解决方案 #

• 检查friends的初始值类型
  确保useAuth提供的friends初始值是数组（比如[]），而非undefined或null。如果初始值不是数组，friends.length会触发隐式错误，导致渲染逻辑直接走到“No Friend”分支。
• 验证setFriends的状态更新有效性
  检查useAuth中setFriends的实现，确认它是通过useState或useReducer正确定义的状态更新函数，避免因状态更新逻辑错误导致前端无法感知数据变化。
• 添加状态更新日志确认
  监听friends状态变化，确认数据是否被正确更新：

  useEffect(() => {
    console.log("当前friends状态:", friends);
  }, [friends]);
  

• 核对数据结构与组件期望是否匹配
  确认后端返回的data是数组类型，且每个元素的字段与Friends组件接收的friend属性完全匹配，避免组件因数据不兼容而静默失败。
• 修复useEffect依赖项问题
  当前useEffect依赖项为空数组，但fetchMessengerUsers依赖setFriends和updateNotification，建议用useCallback包裹函数并补充依赖，避免闭包导致的状态更新异常：

  const fetchMessengerUsers = useCallback(async () => {
    try {
      const token = getToken();
      const config = {
        headers: {
          authorization: "Bearer " + token,
        },
      };
      const { data } = await client("/get-friends", config);
      console.log(data);
      setFriends(data);
    } catch (error) {
      updateNotification("error", "Failed To load the Chat");
    }
  }, [setFriends, updateNotification]);
  
  useEffect(() => {
    setLoggedUser(localStorage.getItem("auth-token"));
    fetchMessengerUsers();
  }, [fetchMessengerUsers]);
  

内容的提问来源于stack exchange，提问作者Kelvin Henry