在 React (Next JS) 和 Apollo 中创建数据后如何获取 Id

Question

我正在尝试在我尝试为我的个人项目制作的电子商务网站中下订单。我想在创建数据或输入我创建的数据后得到Id 并将其重定向到orders/[id] 然后Id。

这是我的代码：

---

import React, { useContext, useState } from "react";
import { FETCH_USER_QUERY } from "../util/graphql/Queries";
import { useMutation, useQuery } from "@apollo/react-hooks";
import { AuthContext } from "../context/auth";
import { CartContext } from "../context/cart/CartContext";
import { Form, Button } from "semantic-ui-react";
import { CREATE_ORDER_MUTATION } from "../util/graphql/Mutations";
import { useRouter } from "next/router";

export default function Checkout() {
  const router = useRouter();

  const [cartItems, setCartItems] = useContext(CartContext);
  const [paymentMethod, setPaymentMethod] = useState("");
  const [address, setAddress] = useState("");

  const [createOrder, { data, loading }] = useMutation(CREATE_ORDER_MUTATION);

  const qty = cartItems.map(({ quantity }) => {
    return quantity;
  });

  const cartItemId = cartItems.map(({ id }) => {
    return id;
  });

  function onSubmit() {
    createOrder({
      variables: {
        qty: qty[0],

        products: cartItemId[0],
        paymentMethod: paymentMethod,
        address: address,
      },
    })
      .then(() => {
        setTimeout(() => {
          const { createOrder: order } = { ...data };
          console.log(order?.id);
        }, 500);
      })
  }

  return (
    <>
      <Form onSubmit={onSubmit} className={loading ? "loading" : ""}>
        <h2>Create a Main Category:</h2>
        <Form.Field>
          <Form.Input
            placeholder="Please Enter Address"
            name="address"
            label="Address: "
            onChange={(event) => {
              setAddress(event.target.value);
            }}
            value={address}
          />
          <label>Status: </label>
          <select
            name="category"
            className="form-control"
            onChange={(event) => {
              setPaymentMethod(event.target.value);
            }}
          >
            <option value="Cash On Delivery">Cash On Delivery</option>
            <option value="PayPal">PayPal</option>
            <option value="GCash">GCash</option>
          </select>
          <br />

          <Button type="submit" color="teal">
            Submit
          </Button>
        </Form.Field>
      </Form>
    </>
  );
}

但是在我提交输入的数据后，日志返回给我undefined，但是当我再次输入数据并提交时，它给了我该数据的前一个 ID。有没有办法做到这一点？如果您不明白我的意思，请告诉我，我会在 cmets 中解释，或者如果您需要任何代码，我可以给您，我会尽可能透明

Answer 1

问题是由陈旧的关闭引起的。在将 setTimeout 推入回调队列时，data 的对象引用是较旧的。因此，该值从未刷新。您需要通过在相同的先前状态上调度操作或使用 useRef 来获取更新的值。

Answer 2

您忘记在 promise 中返回 res 参数。它应该看起来像这样：

.then((res) => {
  setTimeout(() => {
    const { createOrder: order } = { ...res };
    console.log(order?.id);
  }, 500);
})