无法显示数组项和标志错误：未捕获的类型错误：无法读取未定义的属性(读取"map")

Question

我是一只新蜜蜂，还在和react调情。为什么每当我尝试显示任务的数组内容时都会出现此错误?这是我的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;

这是我的tasks。js

import React from 'react'
import  Task  from './Task'
const Tasks = ({tasks}) => {

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

Task.js

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

那么你可以跳过这个错误，正如你所看到的，我在Tasks组件中放入了if条件来检查tasks数组