我没有在我的 React-app 中获得列表项答案

【问题标题】：I am not getting the list item in my React-app我没有在我的 React-app 中获得列表项
【发布时间】：2021-05-24 10:12:14
【问题描述】：

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

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

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

【问题讨论】：

@PriyankKachhela 我改了，还是不行

标签： javascript reactjs create-react-app

【解决方案1】：

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

您正在传递大写 Todos 而不是 todos

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

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

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

【讨论】：