时间戳

首页 > 解决方案 > 在 React 和 Graphql 中操作数据数组

javascript - 在 React 和 Graphql 中操作数据数组

问题描述

我正在尝试操纵这些数据以与 graphql 做出反应。如您所见，我在 graphql 游乐场中有这些数据或输入，这就是我希望输入的样子：

在此处输入图像描述

在我的前端，我有一个 cartItem，里面有一个对象和数组，包括产品名称、id 等等。我希望输入看起来像我上面提供的示例。有没有办法做到这一点？

代码和数据

这就是我的cart's Item Data样子。

购物车项目数据：

[
  {
    id: "6109401fd86d352a70e3694e",
    name: "asasasasa",
    sku: "sasa",
    shippingTime: "1628812800000",
    quantity: 1,
  },
  {
    id: "61051c14f25d8830a8e238c0",
    name: "Pringles Sour Cream & Onion Potato Crisps 158g",
    sku: "sad89f79dsafs",
    shippingTime: "1627084800000",
    quantity: 1,
  },
];

如前面的示例所述，我想要的只是产品的 id 和数量。

Order.js

const [cartItems, setCartItems] = useContext(CartContext);

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,
      products: cartItemId,
      paymentMethod: paymentMethod,
      address: address,
    },
  })
}

每当我需要安慰某人时。如果你登录cartItemId，你会得到这样的东西： 在此处输入图像描述

我的qty.

如果您有任何其他问题或需要任何其他代码，请告诉我，我很乐意提供。

阿波罗突变：

const CREATE_ORDER_MUTATION = gql`
  mutation createOrder(
    $qty: Int!
    $products: String!
    $paymentMethod: String!
    $address: String!
  ) {
    createOrder(
      orderedItems: [{ qty: $qty, products: $products }]
      paymentMethod: $paymentMethod
      address: $address
    ) {
      id
      orderedItems {
        qty
        products {
          id
          name
          sku
          description
        }
      }
    }
  }
`;

标签： javascriptarraysreactjsobjectgraphql

解决方案

下面的代码将转换cartItems为所需的结果。您可以遍历 cartItems 并为每个项目创建一个具有所需结构的对象。

const orderedItems = cartItems.map(({ id, quantity }) => {
  return {
    qty: quantity,
    products: id,
  };
});

完整的代码看起来像这样

const [cartItems, setCartItems] = useContext(CartContext);
const [createOrder, { data, loading }] = useMutation(CREATE_ORDER_MUTATION);

// Restructure the array to desired format
const orderedItems = cartItems.map(({ id, quantity }) => {
  return {
    qty: quantity,
    products: id,
  };
});

console.log(orderedItems); // To check if it looks correct

function onSubmit() {
  createOrder({
    variables: {
      orderedItems: orderedItem,
      paymentMethod: paymentMethod,
      address: address,
    },
  })
}

推荐阅读