无法显示数组项目和标志错误：未介绍的TypeError：无法读取未定义的属性（Reading＆＃x27; MAP＆＃x27;）

Question

我是一个仍在调情reactjs的新鸟。为什么每当我尝试显示任务的数组内容时，我都会遇到此错误。 这是我的app.js

import React from 'react';
import { useState } from 'react'
import './index.css';
import Navbar from './components/layout/Navbar';
import Tasks from './components/Tasks';
// import Message from './components/Message';
// import FunctionClick from './components/FunctionClick';

const App = () => {
  const [tasks, setTasks] = useState([
    {
      id: 1,
      text: 'This is the first text',
      day: 'Feb 5th at 2:30pm',
      reminder: true,
    },
    {
      id: 2,
      text: 'Meeting at School',
      day: 'Feb 6th at 1:30pm',
      reminder: true,
    },
    {
      id: 3,
      text: 'third meeting',
      day: 'Feb 6th at 1:30pm',
      reminder: true,
    },
  ])
 
  return (
    <div className="container">
      <Navbar />
      <Tasks tasks={tasks}/>
    </div>
  
  );

}

export default App;

，这是我的

import React from 'react'
import  Task  from './Task'

const Tasks = ({tasks}) => {
  
  return (
    <>
    {tasks.map((task) => (
    <Task key={task.id} task={task} />
    ))}
    </>
  )
}

export default Tasks

任务

import React from 'react'

export const Task = ({task}) => {
  return (
    <div className='task'>
        <h3>{task.text}
        </h3>
    </div>
  )
}

export default Task;

。我一直被困。请帮我。您可以尝试在应用程序上测试它。谢谢

Answer 1

我认为，根据您的错误

Uncaught TypeError: Cannot read properties of undefined (reading 'map')

，如果您进行更改，

const Tasks = ({tasks}) => {
  if(tasks && tasks.length > 0) {
    return (
      <>
      {tasks.map((task) => (
        <Task key={task.id} task={task} />
       ))}
       </>
     )
    }
   else return null;
}

则可以跳过该错误，就像您在任务中的条件组件中放置的那样，要检查任务 array