React新手复刻YouTube TodoList时控制台报错，求问题排查

算力阿峰

2026-8-11

React TodoList项目控制台报错排查与修复

核心错误定位

你的TodoForm.js里存在基础语法错误：错误使用对象解构获取useState的返回值。useState Hook返回的是数组，而非对象，必须用数组解构语法。

修复步骤

修正useState解构方式
将TodoForm.js中的这一行：

const {input, setInput} = useState('');

改为：

const [input, setInput] = useState('');

避免样式类名冲突（可选但推荐）
按钮和输入框使用了相同的todo-input类名，可能导致样式异常，建议修改按钮类名：

<button className='todo-button'>Add todo</button>

确保TodoForm接收onSubmit属性
由于你的TodoForm调用了props.onSubmit，必须在父组件TodoList中给TodoForm传递该属性，否则后续提交会触发新的报错。示例TodoList.js代码：

import React, { useState } from 'react';
import TodoForm from './TodoForm';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (newTodo) => {
    // 过滤空输入
    if (!newTodo.text.trim()) return;
    setTodos(prevTodos => [newTodo, ...prevTodos]);
  };

  return (
    <div className='todo-list-container'>
      <TodoForm onSubmit={addTodo} />
      {/* 这里添加todo列表渲染逻辑 */}
      {todos.map(todo => (
        <div key={todo.id} className='todo-item'>
          {todo.text}
        </div>
      ))}
    </div>
  );
}

export default TodoList;