我没有在我的 React-app 中获取列表项

Question

我是 React 新手。我刚刚创建了一个名为 TodoList 的 React-app。在我的 src/mycomponents 中，我有四个文件 Header.js、Todos.js、TodoItem.js 和 Footer.js。我做了一些待办事项并试图展示。但我没有得到任何物品。 我没有收到任何错误。我面临的唯一问题是我没有得到任何列表项。

我的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;

'''

我的Todos.js

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>
    ) 
}

我的TodoItem.js

import React from 'react'

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

        </div>
    )
}

告诉我是否需要任何其他文件的代码。我附上了截图。提前谢谢你。

Answer 1

您的代码中有几个输入错误。

您传递的是大写 Todos 而不是 todos

<Todos todos={todos}/>  // pass correct todos list here

在您的 TodoItem 文件中，您需要正确提取 props

import React from 'react'

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

注意：由于您传递的是 Todos 文件中的第一个待办事项，因此这将只呈现一个待办事项。如果你想呈现所有待办事项列表，你需要像下面这样更改代码：-

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>
    ) 
}

TodoItem.js

import React from 'react'

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

我没有在我的 React-app 中获取列表项

I am not getting the list item in my React-app

javascript

reactjs

create-react-app