Question

在使用时我正在创建一个应用程序，我会生成许多抽屉以查看其使用方式。

Array(400) .fill(info).map (info => {return <AlbumBox info = {info} />})

获取对象的数据并将其传递给info变量以生成抽屉。结构在另一个组件中仅传递数据

只有在控制台中，如果我将其放在一个常量中，安排就是这样

```

render() {
  const info = {
   img: 'https://Beatles_-Abbey_Road.jpg',
   name: 'The Beatles - "Abbey Road',
   likes: 200,
   comments: 140,
}
const map = Array(1).fill(info).map(info =>{
    return  <AlbumBox info ={info}/>
})

console.warn(map)
return (

  <ScrollView style={styles.container}>
    <AlbumBox info ={info}/>
    {
      Array(500).fill(info).map(info =>{
        return  <AlbumBox info ={info}/>
    })
    }
  </ScrollView>

);

```

这个想法是，我在屏幕上生成了500个抽屉，该变量只是作为循环发送了该变量

Answer 1

为简单起见，我尝试过同样的事情，只是用p替换了您的组件：

render() {
const info = {
  img: 'https://Beatles_-Abbey_Road.jpg',
  name: 'The Beatles - "Abbey Road',
  likes: 200,
  comments: 140,
}
return (
  <div>
    {
      Array(500).fill(info).map(info => {
        return <p>{info.name}</p>
      })
    }
  </div>
);

}

在这里可以正常工作的示例是link。另外，here是代码的完美零食示例。

在React Native中渲染array.map

1 个答案: