Reactアプリの実行中はデータが表示されません

2
2022.01.14

ちょうどReactJSを傾け始めました。タスクのリストを表示する単純なアプリケーションを構築しようとしています。しかし、私はアプリを実行すると、それはブラウザに任意のアウトを表示しません。コンソールや何かにエラーはありません。ここに何が欠けなのか分かりません。

ここにコードがあります

  1. アプリ.js
import React from 'react';
import TaskList from './TaskList';

function App() {

  const tasks = [
    {id:0,description:"1st Task",isDone:false},
    {id:1,description:"2st Task",isDone:false}
  ]

  return (
    <div>      
     <TaskList tasks={tasks} />
    </div>
  );
}
export default App;
  1. タスクリスト.js
import React from "react";
import Task from "./Task";

export default({ tasks }) => {
    return (
        <ul className="list-group">
        { 
        tasks.map(task => {            
            <li key={task.id} className="List-group-item">
                <Task task={task} />
            </li>
        })}
      </ul>
    )
}
  1. タスク.js
import React from "react";
export default ({task}) => {
    return(  
        <p>
         {task.description}
        </p>     
    )
}

タスクのリストは画面に表示されず、コンソールにエラーがあります。

ここでどんな助けでも!

感謝

回答
2
2022.01.14

ここであなたが間違っているところですが、TaskList.jsmap関数では何も返しません。これを試してみてください:

import React from "react";
import Task from "./Task";

export default({ tasks }) => {
    return (
        <ul className="list-group">
        { 
        tasks.map(task => {
        
            return (<li key={task.id} className="List-group-item">
                      <Task task={task} />
                   </li>)
        })}
      </ul>
    )
}