Javascript 如何访问传递到react子组件的嵌套JSON graphql对象，然后列出这些项？

图ql：

我正在尝试获取resistanceBands JSON对象和price数组，以映射到react子组件。查询在父组件中定义，并在带有项目符号的列表中呈现项目

父组件：

子组件：

您还需要使用.map来表示价格，因为这是一个数组，如下所示：

<ul>
  {product.prices.map(p => <li>{p}</li>)}
</ul>

---

感谢您完美地将其分解！关于将object.keys传递给子组件的快速问题！我的尝试：{result.map[key，value]=>{return{key}:{value}；}}但是，我收到一个引用错误，说明没有定义ResistanceLevel？添加：const result=Object.keysresistanceLevels.mapk=>resistanceLevels[k]；我猜这可能是因为我在子组件中定义了结果，而父组件是定义查询的地方？如果需要在父组件中定义结果，如何将结果元素传递给子组件并呈现键、值？是否在子组件中尝试了Object.keysproduct.ResistanceLevel？根据您的问题，该属性存在于产品对象中。

const GET_PRODUCT_DATA = gql`
  query getProducts {
    theProducts {
      id
      name
      resistanceLevels
      prices   
    }
  }

`
// How I am mapping data (name, etc) into the child component

const productsToRender = data.theProducts 
 {productsToRender.map( product => <ProductDisplay key={product.id} product={ product } />) } 

// How can map the object and array to display their items to the ProductDisplay child component?  

<div>
 <h1>{product.name}</h1> // This works
  <p>Resistance Levels | Intensity:</p>
 <ul>
  <li>{product.resistanceLevels}</li> // This doesnt
 </ul>

 <p>Prices</p>
  <ul>
  <li>{product.prices}</li> // This doesnt
 </ul>
</div>

<ul>
  {product.prices.map(p => <li>{p}</li>)}
</ul>

const ParentComponent =()=>{
   return(
      <div>
       {productsToRender.map(product => <ProductDisplay key={product.id} product={product }/>) }
      </div>
   )

}
export default ParentComponent;


const ProductDisplay =(props)=>{
   return (
      <div>
         <h1>{product.name}</h1> 
         <p>Resistance Levels | Intensity:</p>
         <ul>
            {Object.entries(props.product.resistanceLevels).map(([key, value]) =>{
                return(
                    <li>{key} : {value}</li>
                )
            })}
           </ul>
           <ul>
               {
                   props.product.prices.map(item => {
                       <li>{item}</li>
               })
               }
           </ul>
     </div>
   )
}