如何使用来自 GraphQL 的数据在 Javascript 中创建一个 object？

Question

我是 web 开发的新手，但我有兴趣创建一个电子商务网站，该网站是通过 Google 表格 API（通过Sheety ）获取的。 每个产品都列在电子表格中，其中包含颜色、页面和尺寸列。 我已将 API 成功链接到我的站点（我正在使用 Gatsby），并且我可以通过 GraphQL 访问查询。现在我只是读取查询中的所有值，但我想将所有产品的属性放在一个 object 中。然后，我将遍历所有对象以显示所有产品信息。 我熟悉面向对象的编程，但我在实现从 GraphQL 到产品object 的转换时遇到了一些麻烦。

我的代码目前如下所示。 目前，所有信息都显示在索引页面上：

const IndexPage = ({ data }) => {
 return (
   <Layout>
     {data.allRestApi3A78B9835C2B5Bedce82C6924Ff0243ELilaInventory.nodes[0].inventory.map((inventory) =>          
       return (
         <article>               
           <h4> Color: {inventory.color} </h4>
           <h4> Dimensions: {inventory.dimensions} </h4>
           <h4> Pages: {inventory.pages} </h4>
           <h4> Style: {inventory.style} </h4>
           <img src = {inventory.image} alt = {inventory.id} />
         </article>
       )
   })}     
   </Layout>
 )
}

我现在的计划是制作一个存储Product对象的数组 ( ProductList )。 我将使用电子表格每一行中的数据制作一个新的Product ，然后将该 Product 推送到ProductList 。

var ProductList = [];

//I am not sure how to interpret the definition of a function when using GraphQL. 
//I am familiar with the idea of *const*, but the syntax in Javascript is a bit different than what I am used to.

data.allRestApi3A78B9835C2B5Bedce82C6924Ff0243ELilaInventory.nodes[0].map(createObject(inventory));

function createObject(item) {
  var Product = [productColor: {item.color}, productDimensions: {item.dimensions}, etc....];
  ProductList.push(Product);
} 

我还想为每个 object 创建一张 CSS 卡，因为我喜欢它的外观。 但是，我最终希望能够实现一个排序功能，可以遍历数组中的所有产品，寻找特定的 styles 或 colors。任何建议将不胜感激。 先感谢您。

Answer 1

您使用的 map 错误。 数组的 map function 将返回一个新数组，其中每个元素运行通过您发送的 function 的结果。所以您想要做的是这样的：

const productList = data.allRestApi3A78B9835C2B5Bedce82C6924Ff0243ELilaInventory.nodes[0].map(
  (item) => {
    return { productColor: item.color, productDimensions: item.dimensions };
  },
);

至于你应该如何处理这个问题，如果你正在使用反应，你应该阅读 useState 如果你正在使用 function 组件，或者如果你正在使用 class 组件，则只需阅读常规 state 。 您将希望使用 state 来保存您正在显示的产品集合，以便当您对 state 变量进行更改时，即进行排序时，那些 state 更改将导致您的组件重新呈现，并将反映在 ui 中. 然后，您可以处理某些按钮上的点击事件或任何您想要调用 function 的排序事件，这将对数组进行排序并更新 state。查看数组 method.sort 或任何实用程序库，如 lodash。 我还建议您查看 useEffect（或 class 组件的生命周期方法），如果您还没有的话。 它将帮助您管理和处理副作用，例如 api 电话等等。