React待办清单应用编译失败：'Todo'未定义错误求助

嘿，我一眼就揪出几个导致报错的小问题啦，咱们逐个来搞定：

1. 组件名称大小写不匹配（核心报错原因） #

你在App.js里导入的组件是ToDo：

import ToDo from './ToDo.js'

但渲染的时候却写成了<Todo>：

const val = DoData.map(item => <Todo key = {item.id} item = {item}/>)

React对组件名称的大小写是严格敏感的！而你的ToDo.js里导出的是Todo函数，所以要么把App.js里的导入改成import Todo from './ToDo.js'，要么把渲染的组件改成<ToDo>。推荐前者，保持和组件定义的名称一致。

2. DoData.js的导出语法错误 #

你的DoData.js最后一行写错了：

export default DoData.js

这里多了个.js后缀，正确的导出应该是：

export default DoData

不然导入的时候根本拿不到正确的数组数据。

3. App.js的return内容不符合JSX规则 #

React组件的return必须返回单个JSX元素，你直接返回{val}是不行的，得把它包裹在容器里，比如用<div>或者更简洁的Fragment(<>)。

修正后的完整代码： #

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Todo from './ToDo.js' // 修正导入名称
import DoData from './DoData.js'

function App() {
  const val = DoData.map(item => <Todo key={item.id} item={item}/>)
  return (
    <div className="App"> {/* 加上容器元素 */}
      {val}
    </div>
  );
}

export default App;

ToDo.js

import React from 'react'

function Todo(props){
  return(
    <div className="todo-item">
      <input type="checkbox" checked={props.item.completed}></input> {/* 修正属性名：props.things → props.item，和传入的参数对应 */}
      <p>{props.item.description}</p>
    </div>
  )
}

export default Todo

DoData.js

let DoData = [
  { id: 1, description: "go for a walk", completed: true },
  { id: 2, description: "babysitting", completed: true },
  { id: 3, description: "watch MadMen", completed: false },
  { id: 4, description: "See the mailman", completed: true },
  { id: 5, description: "Say hello to the world", completed: false }
]

export default DoData // 去掉多余的.js后缀

对了，刚才发现ToDo.js里你用了props.things，但App.js里传的是item={item}，所以这里也得改成props.item，不然渲染的时候会拿不到数据哦！

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