React Todo应用报错：Cannot read properties of undefined (reading 'value') 求解决

错误根源及修复点： #

• 未导入useState：代码里用了useState但没从React导入，导致状态相关函数无法正常工作，必须加上import { useState } from "react"。
• onChange写法错误：原代码onChange={setInputValue((e) => e.target.value)}是直接调用setInputValue，而非传递回调函数。正确写法是onChange={(e) => setInputValue(e.target.value)}，这样输入事件触发时才能拿到事件对象e，进而获取输入值。
• 按钮点击事件错误：onClick={setAddTodo(inputValue)}会在组件一渲染就执行状态更新，而且addTodo是数组，更新时应该保留原有元素。改成用回调函数触发，比如单独写一个添加任务的函数，点击时再执行。
• className拼写错误：classNameName要改成className，不然样式挂不上。
• 数组渲染问题：直接渲染{addTodo}会把数组变成逗号分隔的字符串，得用map遍历每个任务项来渲染。

修复后的完整代码： #

import "./App.css";
import { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todos, setTodos] = useState([]); // 变量名更清晰，避免和更新函数重名

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      setTodos(prev => [...prev, inputValue]);
      setInputValue(""); // 添加后清空输入框
    }
  };

  return (
    <div className="screen-background-color">
      <div className="app-content-background">
        <div className="todo-list-heading">
          <h1>To-Do List</h1>
          <img className="todo-image-styles" src="./images/icon.png" alt="Todo图标" />
        </div>
        <div className="input-and-btn-styles">
          <input
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            className="input"
            type="text"
            placeholder="Add Your Task"
          />
          <button onClick={handleAddTodo} className="add-btn">
            Add
          </button>
        </div>
        <div className="todo-list">
          {todos.map((todo, index) => (
            <div key={index} className="unchecked-image-and-text">
              <img
                className="unchecked-image"
                src="./images/unchecked.png"
                alt="未完成任务"
              />
              <h4 className="unchecked-h5-heading">{todo}</h4>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default App;

额外优化说明： #

• 把addTodo变量名改成todos，避免和更新函数混淆，代码可读性更好。
• 添加了空输入过滤，防止添加空白任务。
• 给列表项添加key属性，符合React列表渲染规范。
• 补充了图片的alt文本，提升页面可访问性。

内容的提问来源于stack exchange，提问作者Junaid khan