React Todo组件删除功能触发TypeError: Cannot read properties of undefined (reading 'filter')

这个错误的本质是调用.filter()方法的todos变量值为undefined，不是预期的数组类型。
常见触发场景有两个：

• 父组件中定义todos状态时没有给正确的初始值，比如写了const [todos, setTodos] = useState()，没有填入空数组作为默认值，初始渲染时todos就是undefined
• 父组件渲染Todo子组件时，漏传了todos属性，导致子组件解构props拿到的todos是undefined

排查父组件逻辑 #

1. 确认todos状态初始化时填入了空数组作为初始值：

const [todos, setTodos] = useState([])

2. 确认调用Todo组件时完整传入了所有需要的props：

<Todo 
  text={todo.text}
  todo={todo}
  todos={todos}
  setTodos={setTodos}
/>

增加兜底逻辑避免同类问题 #

可以直接在子组件props解构时给todos设置默认空数组，就算父组件漏传或者传错也不会报错：

const Todo = ({ text, todo, todos = [], setTodos }) => {
  // 原有逻辑不变
}

也可以在调用filter时加可选链兜底：

setTodos(todos?.filter((el) => el.id !== todo.id) || [])

内容的提问来源于stack exchange，提问作者Knowexx Ke