ReactJS TodoList开发：输入字段内容无法完整显示问题求助

嘿，我来帮你搞定这个头疼的小问题！既然已经排除了setState异步更新的锅，那咱们就从其他几个常见的坑入手排查：

1. 先检查日期输入框的 onChange 处理逻辑 #

这是最容易踩的坑！比如你是不是不小心给日期的 onChange 加了字符串截取？比如写成了这样：

const [date, setDate] = useState('');

// 错误写法：不小心截取了前3位
const handleDateChange = (e) => {
  setDate(e.target.value.slice(0, 3)); // 这里会导致输入3456只保留345
};

如果是这种情况，把slice(0,3)去掉就行，改成直接赋值：

const handleDateChange = (e) => {
  setDate(e.target.value);
};

2. 检查待办对象的创建逻辑 #

你说要把两个字符串存入对象再插入数组，那有没有可能在创建对象的时候，日期字段赋值错了？比如拼写错误或者拿错了变量：

// 错误写法：把描述的值赋给了date
const newTodo = {
  desc: description,
  date: description, // 这里应该是date变量，不是description！
};

正确的应该是：

const newTodo = {
  desc: description,
  date: date,
};

3. 检查列表渲染的代码 #

最后看看渲染待办项的时候，是不是对日期做了不必要的截取？比如：

// 错误写法：渲染时截取了日期长度
{todos.map(todo => (
  <div key={todo.id}>
    <p>描述：{todo.desc}</p>
    <p>日期：{todo.date.slice(0, 3)}</p> {/* 这里会砍掉最后一位 */}
  </div>
))}

改成直接渲染完整的日期值：

{todos.map(todo => (
  <div key={todo.id}>
    <p>描述：{todo.desc}</p>
    <p>日期：{todo.date}</p>
  </div>
))}

给你一个完整的正确示例参考 #

如果还是找不到问题，对比一下这个完整的TodoList实现：

import { useState } from 'react';

function TodoList() {
  const [description, setDescription] = useState('');
  const [date, setDate] = useState('');
  const [todos, setTodos] = useState([]);

  const handleAddTodo = () => {
    if (!description || !date) return;
    // 创建待办对象
    const newTodo = {
      id: Date.now(),
      desc: description,
      date: date,
    };
    // 更新数组（注意这里用展开运算符创建新数组，避免直接修改原数组）
    setTodos([...todos, newTodo]);
    // 清空输入框
    setDescription('');
    setDate('');
  };

  return (
    <div>
      <input
        type="text"
        placeholder="输入描述"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
      />
      <input
        type="text"
        placeholder="输入日期"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
      <button onClick={handleAddTodo}>添加待办</button>

      <div className="todo-list">
        {todos.map(todo => (
          <div key={todo.id} className="todo-item">
            <p><strong>描述：</strong>{todo.desc}</p>
            <p><strong>日期：</strong>{todo.date}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TodoList;

你可以对照自己的代码，看看是不是在上面某一步出了问题～

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