Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/376.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 我通过GraphQL进行的查询在我的Web应用程序上正确地返回了数据,但在手机上没有。为什么?_Javascript_Reactjs_React Native_Graphql_Apollo Client - Fatal编程技术网

Javascript 我通过GraphQL进行的查询在我的Web应用程序上正确地返回了数据,但在手机上没有。为什么?

Javascript 我通过GraphQL进行的查询在我的Web应用程序上正确地返回了数据,但在手机上没有。为什么?,javascript,reactjs,react-native,graphql,apollo-client,Javascript,Reactjs,React Native,Graphql,Apollo Client,我建立了一个电子邮件按钮,向用户发送他们在选举中投票的选择的收据。该函数返回web上的正确信息。它返回选举名称、选票名称和选项名称。这些标题和名称的数据是使用GraphQL从查询中提取的。问题是当有多个选项的选票时,例如3,收据显示3个选项名称,但它们都是相同的 当我控制台记录查询中的数据时,它会显示与上面显示的相同的收据信息,名称在移动设备上重复,但不会在Web上重复。我已经比较了Web和移动中的功能和查询的代码,没有发现任何差异,我甚至从正在工作的Web应用程序复制了代码,并将其粘贴到移

我建立了一个电子邮件按钮,向用户发送他们在选举中投票的选择的收据。该函数返回web上的正确信息。它返回选举名称、选票名称和选项名称。这些标题和名称的数据是使用GraphQL从查询中提取的。问题是当有多个选项的选票时,例如3,收据显示3个选项名称,但它们都是相同的

当我控制台记录查询中的数据时,它会显示与上面显示的相同的收据信息,名称在移动设备上重复,但不会在Web上重复。我已经比较了Web和移动中的功能和查询的代码,没有发现任何差异,我甚至从正在工作的Web应用程序复制了代码,并将其粘贴到移动应用程序中,但没有成功。该移动应用程序采用Expo和React Native构建

我在这一点上感到困惑,无法理解同一个查询如何返回不同的数据

//graphql
import {
  ELECTION_REPORT,
  MY_VOTE,
  FETCH_BALLOTS,
} from '../../graph/queries/elections';
import { SEND_EMAIL } from '../../graph/mutations/elections';

const ElectionsComponent = ({ item, navigation }) => {
  const { id, title, endDate, startDate } = item;

** THESE HOLD THE DATA FOR THE USER AND UNION **
  const unionState = useUnionState();
  const userState = useUserState();

  const [setEmail, setNewEmail] = useState(userState.profile.email);
  const [receipt, setReceipt] = useState();
  const [timeVoted, setTimeVoted] = useState();
  const [dataReady, setDataReady] = useState(false);
  const [storedBallot, setStoredBallot] = useState();

  const { loading } = useQuery(ELECTION_REPORT, {
    variables: {
      unionID: unionState.id,
      electionID: id,
    },
    notifyOnNetworkStatusChange: true,
    onCompleted: (data) => {
      if (data.electionReport) {
        data.electionReport.forEach((report) => {
          if (report.respondentID == userState.id) {
            setReceipt(report.recieptID);
          }
        });
      }
    },
  });

  const { loading: ballotLoading, data: ballotData } = useQuery(FETCH_BALLOTS, {
    variables: {
      unionID: unionState.id,
      electionID: id,
    },
    onCompleted: () => {

// THIS IS WHERE THE STORED BALLOT IS CREATED

      const mappedBallots = new Map();
      if (ballotData && ballotData.ballots) {
        ballotData.ballots.forEach((val) =>
          mappedBallots.set(val.id, { title: val.title, votedFor: [**Titles populate here**] })
        );
      }
      setStoredBallot(mappedBallots);
      getMyVote();
    },
  });

  const [getMyVote, { loading: userVoteLoading, error, data }] = useLazyQuery(
    MY_VOTE,
    {
      variables: {
        unionID: unionState.id,
        electionID: id,
        receiptID: receipt,
      },
      notifyOnNetworkStatusChange: true,
      onCompleted: () => {
          data.myVote.forEach((vote) => {
            setTimeVoted(vote.respondedAt);
            if (storedBallot.has(vote.ballotID)) {
              const value = storedBallot.get(vote.ballotID);
              value.votedFor.push(vote.votedFor.title);
              storedBallot.set(vote.ballotID, value);
            }
          });
        setDataReady(true);
      },
    }
  );

  const [sendEmail, { loading: submitLoading }] = useMutation(SEND_EMAIL, {
    onCompleted: () => {
          // Shows the email was sent successfully
    },
    onError: (error) => {
          // Shows if the email mutation failed
    },
  });


  const submitEmail = () => {
    if (dataReady) {

      let content = `<div style="display: flex;justify-content: center;margin: 20px 0">
        <img src="${
          unionState.information.imageURL
        }" alt="Union Logo" style="width: 125px;height: 125px;border-radius: 10px">
      </div>\n

        <h1 style="font-style: italic;text-align: center;line-height: 1.3">${title}</h1>\n

        <p style="margin-top:20px">On ${format(
          new Date(timeVoted),
          'PPPPp'
        )}</p>`;

      storedBallot.forEach((poll) => {
        content =
          content +
          `<h3 style="margin-top:40px">For ${poll.title}</h3>\n  <=== THIS IS THE OPTION TITLE
          <p>You selected:</p>`;
        poll.votedFor.map((option) => {
          content = content + `<p style="margin-left:30px">${option}</p>`;
        });
      });

      content =
        content +
        `<h5 style="margin-top:80px">Receipt ID:</h5>\n
        <p>${receipt}</p>`;

      sendEmail({
        variables: {
          email: [setEmail],
          sender: 'Requested Vote Receipt',
          subject: 'Here is what you selected',
          content: content,
        },
      });
    }
  };

 
  return (
    <Card>

          <Text>
            Receipt ID: {receipt.slice(-5)}
          </Text>

          <BlackButton
            title='Email My Receipt'
            onPress={() => submitEmail()}
          />

    </Card>
  );
};

export default ElectionsComponent;

返回数据的方式是,每个选票作为一个对象返回,如果选票有多个选定选项,则将为用户选择的每个选项创建一个具有相同选票id的对象。然后,在创建storedBallot时,我将选票id分组在一起,这将保存“votedFor”标题的数组。如果有任何关于为什么这不起作用的建议,我洗耳恭听。

我怀疑Expo是因为没有查询错误、奇怪/不必要的数据/状态管理。。。记录您的状态更改。。。准备工作,可编辑
export const ELECTION_REPORT = gql`
  query electionReport(
    $unionID: UnifiedID!
    $electionID: UnifiedID!
    $ballotID: UnifiedID
    $reportType: String
  ) {
    electionReport(
      unionID: $unionID
      electionID: $electionID
      ballotID: $ballotID
      reportType: $reportType
    ) {
      id
      ballotID
      respondentID
      imageURL
      optionID
      respondedAt
      mode
      ipAddress
      userAgent
      respondent {
        id
        firstName
      }
      votedFor {
        title
      }
      recieptID
    }
  }
`;

export const MY_VOTE = gql`
  query myVote(
    $unionID: UnifiedID!
    $electionID: UnifiedID!
    $receiptID: String!
  ) {
    myVote(unionID: $unionID, electionID: $electionID, receiptID: $receiptID) {
      id
      ballotID
      respondentID
      imageURL
      optionID
      respondedAt
      mode
      ipAddress
      userAgent
      respondent {
        id
        firstName
        lastName
      }
      votedFor {
        title
      }
      recieptID
      abstained
    }
  }
`;