从 REST 访问数组中的数组 API

Question

您好，我正在尝试在颜色和尺寸这两个不同的类别中显示变体，为此我需要从 api 获取数据，我可以访问“属性”，但我想成为能够访问 0 和 1 并映射它们，我不知道该怎么做。

{variants.length > 1 ? (
        
   variants.attributes.map(({ name, values }) => (
     <ProductOptions
     key={`key-${name}`}
       name={name}
        values={values}
       selectedOptions={selectedOptions}
      setOptions={setOptions}
     />
    ))
  ) : (
    <Fragment />
  )}

非常感谢！

Answer 1

据我了解，具有 6 个元素的数组的输出，其中 6 个元素中的每一个都具有属性，而属性又是另一个数组，并且您想要遍历这些属性，因此需要 2 个循环。一个循环遍历父数组和子数组中的秒数。

variants.map((variant) => {
  variant.attributes.map((attribute) => {
     console.log('attribute: ', attribute);
     console.log('attribute id: ',attribute.id);
  });
});

p.s。您可以使用 forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 但在这种情况下几乎没有区别。

另外，您似乎正在使用 ReactJS 并构建一些 JSX 以放入渲染的 jsx 中。我会争辩预先形成数组并在最终的 jsx 中插入行，因此您的最终 jsx 将更具可读性，尤其是在双循环或任何更复杂的 jsx 的情况下。

const attributes = [];
variants.map((variant) => {
  variant.attributes.map((attribute) => {
     console.log('attribute: ', attribute);
     console.log('attribute id: ',attribute.id);
     attributes.push(<div key={attribute.id}>{attribute.id}</div>)
  });
});

// later 

return (
   <div>
    {attributes}
   </div>
)

从 REST 访问数组中的数组 API

Get access to an array in an array from REST API

rest

reactjs

next.js