Javascript 我没有在我的React应用程序中获取列表项

我是新来的。我刚刚创建了一个名为TodoList的React应用程序。在我的src/mycomponents中，我有四个文件Header.js、Todos.js、TodoItem.js和Footer.js。我做了一些todolist，并试图在展览上展示。但是我没有得到任何东西我没有收到任何错误。我面临的唯一问题是没有得到任何列表项。

My

App.js

import "./App.css";
import Header from "./MyComponents/Header";
import {Todos} from "./MyComponents/Todos";
import Footer from "./MyComponents/Footer";
import {TodoItem} from "./MyComponents/TodoItem";

function App() {
  let todos = [
    {
      sno:1,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    },
    {
      sno:2,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    },
    {
      sno:3,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    }
  ]
  return (
    <>
      <Header title="My Todos List"/>
      <Todos todos={Todos}/>
      
      
    </>
  );
}

export default App;

import React from 'react'
import {TodoItem} from "../MyComponents/TodoItem";


export const  Todos = (props) =>{
    return (
        <div className="container">
            <h3> Todos List</h3>
            <TodoItem todo={props.todos[0]}/>
        </div>
    ) 
}

import React from 'react'

export const TodoItem = (todos) => {
    return (
        <div>
            <h4>{todos.title}</h4>
            <p>{todos.desc}</p>

        </div>
    )
}

My

TodoItem.js

import "./App.css";
import Header from "./MyComponents/Header";
import {Todos} from "./MyComponents/Todos";
import Footer from "./MyComponents/Footer";
import {TodoItem} from "./MyComponents/TodoItem";

function App() {
  let todos = [
    {
      sno:1,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    },
    {
      sno:2,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    },
    {
      sno:3,
      title: "Go to the Market",
      desc: "You need to go to market to get this job done"

    }
  ]
  return (
    <>
      <Header title="My Todos List"/>
      <Todos todos={Todos}/>
      
      
    </>
  );
}

export default App;

import React from 'react'
import {TodoItem} from "../MyComponents/TodoItem";


export const  Todos = (props) =>{
    return (
        <div className="container">
            <h3> Todos List</h3>
            <TodoItem todo={props.todos[0]}/>
        </div>
    ) 
}

import React from 'react'

export const TodoItem = (todos) => {
    return (
        <div>
            <h4>{todos.title}</h4>
            <p>{todos.desc}</p>

        </div>
    )
}

从“React”导入React
导出常量TodoItem=（todos）=>{
返回(
{todos.title}
{todos.desc}

)
}

告诉我任何其他文件的代码是否需要。我已经附上了截图。

---

提前谢谢。

您的代码中有几处键入错误

您传递的是资本TODO，而不是

TODO

注意：由于您正在从

Todos

文件传递第一个todo项，因此这将只呈现一个todo项。如果要呈现所有待办事项列表，需要更改如下代码：-

Todos.js

import React from 'react'
import {TodoItem} from "../MyComponents/TodoItem";


export const  Todos = ({todos}) =>{
    return (
        <div className="container">
            <h3> Todos List</h3>
            <TodoItem todos={todos}/>
        </div>
    ) 
}

import React from 'react'

export const TodoItem = ({todos}) => {
    return (
        <div>
            {todos.map(todo => (
              <h4>{todo.title}</h4>
              <p>{todo.desc}</p>
            ))}
        </div>
    )
}

---

@PriyankKachhela我变了，还是没工作