React中notes数组console打印正常但页面不渲染且报组件类型无效错误

问题原因 #

1. map回调函数未返回JSX元素
   你在notes.map中使用了带花括号的函数体写法，但没有显式添加return语句返回要渲染的<Card>组件，因此每次迭代默认返回undefined，React无法渲染undefined值，自然页面没有内容输出。
   这也是你看到控制台报错expected a string (for built-in components) or a class/function (for composite components) but got: undefined的核心原因。
2. 可同步检查组件导入是否正确
   如果修复返回问题后仍然报错，需要确认Card、Button组件的导入语句是否正确，比如从react-bootstrap导入时要使用命名导入写法：import { Card, Button } from 'react-bootstrap'，混用默认导入和命名导入也会触发组件类型无效的报错。

修复方法 #

修改map的回调写法，二选一即可：

方案1：显式添加return语句 #

{
  notes.map((note) => {
    // 新增return返回JSX
    return (
      <Card style={{ margin: 10 }} key={note._id}>
        <Card.Header style={{ display: 'flex' }}>
          <span
            style={{
              alignSelf: 'center',
              color: 'black',
              cursor: 'pointer',
              flex: 1,
              fontSize: 18,
              textDecoration: 'none',
            }}
          >
            {note.title}
          </span>
          <div>
            <Button>Edit</Button>
            <Button className='mx-2' variant='danger'>Delete</Button>
          </div>
        </Card.Header>
      </Card>
    )
  })
}

方案2：用小括号替代花括号实现隐式返回 #

{
  // 把函数体的花括号换成小括号，不需要写return
  notes.map((note) => (
    <Card style={{ margin: 10 }} key={note._id}>
      {/* 原有JSX内容不变 */}
    </Card>
  ))
}

注意：渲染列表项时需要给根元素添加唯一的key属性，上述代码中使用note._id作为key即可避免React的列表警告。

内容的提问来源于stack exchange，提问作者bdarab