时间戳

首页 > 解决方案 > 为什么我的 React 应用总是无法编译？

javascript - 为什么我的 React 应用总是无法编译？

问题描述

我正在学习反应并构建一个简单直接的列表应用程序。但是，它不断抛出此错误：

./src/App.js
  Line 9:35:  'Todo' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

我不确定为什么这个错误不断抛出。我已经定义了我的 ToDo js 文件 - 我相信我正确地导出了它，然后正确地导入了 App js 文件。我错过了什么吗？

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 (
   {val}
  );
}

export default App;

ToDo.js 文件：

import React from 'react'

function Todo(props){
    return(
        <div className = "todo-item">
            <input type ="checkbox" checked = {props.things.completed}></input>
    <p>{props.things.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

标签： javascriptreactjs

解决方案

选项1

Update
import ToDo from './ToDo.js'
to
import Todo from './ToDo.js'

as you are using <Todo key = {item.id} item = {item}/> in your app

选项 2

Update
<Todo key = {item.id} item = {item}/>
to
<ToDo key = {item.id} item = {item}/>

as you are importing component as ToDo
import ToDo from './ToDo.js'

当您在 ToDo.js 文件中将 ToDo 导出为默认值时，您可以在应用程序的任何位置在导入时将其用作任何名称。但请确保在渲染组件时，它与顶部的导入名称匹配。

推荐阅读