使用 React UseEffect() 从 GraphQL 获取数据答案

【问题标题】：Using React UseEffect() to fetch data from GraphQL使用 React UseEffect() 从 GraphQL 获取数据
【发布时间】：2022-01-25 13:07:50
【问题描述】：

我正在尝试从 graphQL 获取数据，并且我知道通过将函数放入反应 UseEffect()，我将能够在数据更新和构造后调用该函数。但是，我正在聊天室中工作，并且数据没有出现在屏幕上：

import {
  CREATE_MESSAGE_MUTATION,
  MESSAGES_QUERY,
  MESSAGE_SUBSCRIPTION,
} from "../graphql";
import { useQuery, useSubscription } from "@apollo/client";
import React, { useEffect } from "react";
import { Tag } from "antd";
const ChatBox = ({ me, friend, ...props }) => {
  //me friend are strings

  const chatBoxName = [me, friend].sort().join("_");
  const { loading, error, data, subscribeToMore } = useQuery(MESSAGES_QUERY, {
    variables: { name: chatBoxName },
  });

  useEffect(() => {
    try {
      subscribeToMore({
        document: MESSAGE_SUBSCRIPTION,
        variables: { name: chatBoxName },
        updateQuery: (prev, { subscriptionData }) => {
          if (!subscriptionData.data) return prev;
          const newMessage = subscriptionData.data;
          console.log("Subscribing more data: ", newMessage);
        },
      });
    } catch (e) {
      console.log("Error in subscription:", e);
    }
  }, [subscribeToMore]);

  if (loading) return <p>loading ...</p>;
  if (error) return <p>Error in frontend chatbox: {error}</p>;

  return (
    <div className="App-messages">
      {console.log(data.chatboxs[0].messages)}
      {data.chatboxs[0].messages.map(({ sender: { name }, body }) => {
        <p className="App-message">
          <Tag color="blue">{name}</Tag>
          {body}
        </p>;
      })}
    </div>
  );
};

export default ChatBox;

在loading ... 的一小段延迟之后，它转向<div className="App-messages">，里面没有消息。但是，在控制台上，我可以清楚地看到要打印的消息。 UseEffect()中的函数有什么问题？如果有人能提供帮助，我将不胜感激。

【问题讨论】：

看起来您在 useEffect 依赖数组中缺少 chatBoxName。这就是我开始的地方

标签： javascript reactjs graphql use-effect

【解决方案1】：

{data.chatboxs[0].messages.map(({ sender: { name }, body }) => { // <- this part
    <p className="App-message">
      <Tag color="blue">{name}</Tag>
      {body}
    </p>;
  })}

作为回调，您声明了一个不返回 JSX 元素的函数。

用这个替换

{data.chatboxs[0].messages.map(({ sender: { name }, body }) => (
    <p className="App-message">
      <Tag color="blue">{name}</Tag>
      {body}
    </p>;
  ))}

【讨论】：

天哪，谢谢你为我工作！是因为在 {} 中这应该是 javascript 而不是 JSX？
是的，我的朋友，这就是 javascript 的 map 函数的工作方式，它循环遍历元素并将每个值重新分配给您在回调函数中返回的值。因此，如果没有返回任何值，那么循环后每个值都将是未定义的，并且不会呈现 HTML。