TypeError：无法读取未定义的属性（读取“过滤器”）

Question

我正在尝试创建一个事件来删除按钮单击时的元素，但收到错误“TypeError: Cannot read properties of undefined (reading 'filter')”

const Todo = ({ text, todo, todos, setTodos }) => {
  const deleteHandler = () => {
    setTodos(todos.filter((el) => el.id !== todo.id));
  };

  return (
    <div className="todo">
      <li className="todo-item">{text}</li>
      <button className="complete-btn">
        <i className="fas fa-check"></i>
      </button>
      <button onClick={deleteHandler} className="trash-btn">
        <i className="fas fa-trash"></i>
      </button>
    </div>
  );
};

Answer 1

你必须检查元素是否存在，我希望它的数组带有id属性，如果它是undefined，那么在它上面调用.fliter没有意义，它肯定会抛出错误，只有在它有数据，这样可以解决问题，我也在我的项目中这样做，

const deleteHandler = () =>{
   setTodos(todos && todos.filter((el) => el.id !== todo.id));
};

你可以这样做，

const deleteHandler = () =>{
   if(todos ){
      setTodos(todos.filter((el) => el.id !== todo.id));
   }
};