类型错误： 无法读取未定义的属性'map'.....如何修复它

Question

我是React的新手。我原以为做一个ToDoList项目会很有趣，但最终做了很多工作，而且我仍然无法找出这个错误。firstFile-app.js此文件包含useEffect。。其中我遇到了问题

import React,{ useState, useEffect } from "react";
import './App.css';
//Importing Components
import Form from "./components/Form" 
import TodoList from "./components/TodoList";
function App() {
// All of our states
const [inputText,setInputText] = useState("");
const [todos,setTodos] = useState([]);
const {status,setStatus} = useState("all");
const {filteredTodos,setFilteredTodos} = useState([]);
// Use Effect
useEffect(() => {
filterHandler();
}, [todos, status]);
// Functions
const filterHandler = () =>
{
switch (status)
{
case "completed":
setFilteredTodos(todos.filter((todo) => todo.completed === true));
break;
case "uncompleted":
setFilteredTodos(todos.filter((todo) => todo.completed === false));
break;
default:
setFilteredTodos(todos);
break;
}
};
return (
<div className="App">
<header>
<h1>Afraz's ToDo List</h1>
</header>
<Form 
inputText={inputText} 
todos={todos} 
setTodos={setTodos} 
setInputText={setInputText}
setStatus={setStatus}
/>
<TodoList 
setTodos={setTodos} 
todos={todos}
filteredTodos={filteredTodos}
/>
</div>
);
}
export default App;

secondFile-todolist.js这是我试图在其中使用函数的文件。。。以呈现列表

import React from "react";
// Import Components
import Todo from "./Todo";
const TodoList = ({ todos,setTodos,filteredTodos }) =>
{
console.log(filteredTodos);
return(
<div className="todo-container">
<ul className="todo-list">
{filteredTodos.map((todo) => (
<Todo 
setTodos={setTodos} 
todos={todos} 
key={todo.id} 
todo={todo} 
text={todo.text}
/>
))}
</ul>
</div>
);
};
export default TodoList;

TypeError:无法读取未定义的…..的属性"map"。。。。。如何修复？我不知道！正如我所说，我是新反应的。

Answer 1

首先，您必须了解useState是异步的。

您的const {filteredTodos,setFilteredTodos} = useState([]);只在页面加载时才将emtpy设置为调用uruseEffect，该函数将您的切换操作设置为在setState中填充filteredTodos，也就是asynchronous，并且您正在尝试在possible没有值yeat的数组上进行映射，因为您不知道何时会收到切换操作的值。

你需要做的是：

~设置一个条件，当你有一个值时，只映射到你的filteredTodos上，类似于

<div>
{filteredTodos.length > 0 && 
filteredTodos.map(todo => ( ...)
)}
</div>

此外，练习命名更好的文件名，不要使用firstFile导航栏。。。second文件导航栏。。。

例如：尝试类似Navbar、NavbarItems 的命名