javascript - 如何解决 map 循环无法打印数据(组件)? React

我有三个组件

父组件(大父组件) 子组件(父组件的子组件) ComponentChildChild(ComponentChildChild 的子组件)

这三个组件是连接在一起的,因此每个组件都是上面的这个子组件。

我 props 从 ComponentFather 到 ComponentChildChild 的数据。那工作。但是当我尝试打印所有数据时没有工作。仅打印第一个数据检查代码 ->

export const ComponentFather  = () => { 
  // this is only mockup data for example
  let data = [
    { 
      id: 2000004,
      name: 'test123.pdf', 
    },
    { 
      id: 2000005,
      name: 'test123123.pdf', 
    },
  ];
  return (
    <ComponentChild data={data}> 
    </ComponentChild>
  );
};

export const ComponentChild  = ({data}) => { 
  // console.log(data); i got all data.
  return (
    {data.map((singleData) => {
       <ComponentChildChild data={data}> 
       </ComponentChildChild>
   })}
  );
};



export const ComponentChildChild  = ({data}) => { 
  return (
     <div> { data.name } </div>
     <div> { data.id } </div>
  );
};

上面的代码没有工作......

为什么?

我也尝试在 ComponentChildChild 组件内设置 data.map

export const ComponentChildChild  = ({data}) => { 
  return (
    { data.map((singleData) => {
     <div> { data.name } </div>
     <div> { data.id } </div>
    })}
  );
};

也没有工作。仅在我硬编码示例 data[0].name 时工作

export const ComponentChildChild  = ({data}) => { 
  return ( 
     <div> { data[0].name } </div>
     <div> { data[0].id } </div> 
  );
};

但有时我会有 10 个项目...我需要打印每个

回答1

传递 singleData 而不是 data

export const ComponentChild  = ({data}) => { 
  return (
    {data.map((singleData) => {
       <ComponentChildChild data={singleData}> 
       </ComponentChildChild>
   })}
  );
};

相似文章

twilio - DevTools 无法加载源 map

我知道Chrome开发工具中有很多关于这些警告的帖子。对于所有这些,解决方案是关闭通知“启用javascript源maps”和“启用CSS源maps”。我想知道的是如何解决这个问题,以及导致这些警告的...

随机推荐

最新文章