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

Posted 2023-03-08

【中文标题】在 React (Next JS) 和 Apollo 中创建数据后如何获取 Id

【英文标题】：How to get Id after data is created in React (Next JS) and Apollo

【发布时间】：2021-10-10 10:39:24

【问题描述】：

我正在尝试在我尝试为我的个人项目制作的电子商务网站中下订单。我想在创建数据或输入我创建的数据后得到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 中解释，或者如果您需要任何代码，我可以给您，我会尽可能透明

【问题讨论】：

你应该考虑通过使用 async/await 而不是 promises/then.. 来简化 onSubmit 函数。这样会更容易阅读。

您好，感谢您的回答，我会尝试申请的。

【参考方案1】：

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

【讨论】：

您好，感谢您的回答我明白您在解释什么，如果可能的话，您能否用我的数据做一个例子？再次感谢

【参考方案2】：

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

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

【讨论】：

您好，感谢您的回答，很抱歉，它仍然返回 undefined

你能把console.log(data)作为setTimeout的第一件事吗？

是的，请稍候

另一件事，then 不应该返回包含数据的res 之类的东西吗？您可以尝试将其添加到函数并记录它吗？

是的，我将其标记为已接受的答案并对其表示赞同，再次感谢您的宝贵时间，并非常感谢它:)