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: 无法读取未定义的属性“地图”.....如何解决？我没有线索！正如我所说，我是新来的。

Answer 1

首先你必须明白 useState 是异步的。

并且您的 const {filteredTodos,setFilteredTodos} = useState([]); 仅在您的页面加载时调用您的 useEffect 将您的 filteredTodos 初始化为 ur useEffect 将您的 switch 操作设置为在 setState 中填充您的 asynchronous，再次是 possible，并且您立即尝试映射 filteredTodos 没有值的数组，因为您不知道何时会收到 switch 操作的值。

您需要做的是：

~当你有一个值时，把一个条件只映射到你的 <div> {filteredTodos.length > 0 && filteredTodos.map(todo => ( ...) )} </div> 上，就像这样：

{{1}}

另外，练习命名更好的文件名，不要使用 firstFile-navbar ... secondFile-navbar ...

例如：尝试命名为 Navbar, NavbarItems

类型错误：无法读取未定义的属性“地图”......如何修复它

1 个答案: