javascript - 在 React Native 中渲染 array.map

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 个抽屉，只是将该变量作为循环发送

标签： javascriptarraysreactjsreact-native

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>
);

}

它在这里工作正常是工作示例的链接。这里还有一个完美运行的代码示例。