如何使用 map 函数列出 React 中的数组？

Question

这是我的代码：

import React, { FunctionComponent } from 'react'

export const ListPage: FunctionComponent = () => {
 const list = [
  {
    title: 'I like React'
  },
  {
    title: 'I also like Angular'
  }
 ]

 const listTag = () => {
  list.map(
    item => {
     <h1>{item.title}</h1>
    }
  )
 }

 return(
  <listTag/>
 )
}

但我仍然收到错误消息，无法取出数组。

Answer 1

试试这个：

import React, { FunctionComponent } from 'react'

export const ListPage: FunctionComponent = () => {
    const list = [
     {
       title: 'I like React'
     },
     {
       title: 'I also like Angular'
     }
    ];

    const ListTag = () => list.map(item => (<h1>{item.title}</h1>))

    return (
      <ListTag />
    )
}

注意：下面列出的代码中存在问题

const listTag = () => { //fist letter of component need to be captial
  list.map( // the value of `list.map()` needed to be return
    item => {
    <h1>{item.title}</h1> // here you are not returning the value to map function.
    }
  )
}

return(
  <listTag/> // If You are using any function component make sure the first letter is also captial.
)