React组件JSX内列表map无法正确渲染问题求助

核心问题 #

你的代码存在3个直接导致渲染失败的问题：

• 任务列表myTaskList是组件内的普通局部变量，没有通过useState做状态托管。组件每次重渲染时都会重新执行const myTaskList = []，把数组重置为空，之前push的内容会在重渲染时直接丢失
• 直接对普通变量执行push操作不会触发React重渲染，哪怕控制台能打印出数组长度变化，React感知不到数据变更，不会重新执行JSX渲染逻辑
• 表单提交事件没有阻止默认行为，点击提交按钮会触发浏览器原生的页面刷新，内存中临时存储的数据会被全部清空

修复后完整代码 #

import React, { useState } from 'react';

const App = () => {
  const [task, setTask] = useState('');
  // 将任务列表纳入state管理
  const [myTaskList, setMyTaskList] = useState([]);

  const allTasks = myTaskList.map((eachTask) => {
    return <li key={eachTask.id}>{eachTask.text}</li>;
  });

  const handleChange = (e) => {
    setTask(e.target.value);
  };

  const handleSubmit = (e) => {
    // 阻止表单默认提交的页面刷新行为
    e.preventDefault();
    // 遵循state不可变原则，传入新数组触发重渲染
    setMyTaskList([
      ...myTaskList,
      {
        id: Math.floor(Math.random() * 10000),
        text: task,
      }
    ]);
    setTask('');
  };

  return (
    <div className="todo-app">
      <center>
        <h1>MONO To Do APP</h1>
        <p>Track your progress , add tasks, then mark complete when done</p>
        <div className="space"></div>
        <form onSubmit={handleSubmit}>
          <label>Enter your next task:</label>
          <br />
          <input
            onChange={handleChange}
            value={task}
            type="text"
            name="task"
            placeholder="enter a task to track your progress..."
          />
          <br />
          <button type="submit">Add</button>
        </form>
        <div className="space"></div>
        <div className="task-list">
          <h2>Your Active Tasks List</h2>
          <ul>{allTasks.length > 0 ? allTasks : <li>no tasks found</li>}</ul>
        </div>
      </center>
    </div>
  );
};
export default App;

关键修改说明 #

• 用useState定义myTaskList状态，将列表数据纳入React的状态管控，状态变化时React会自动触发重渲染
• 更新列表时不直接修改原数组，而是通过展开运算符生成新数组传入状态更新函数，符合React状态不可变的更新要求
• 给提交事件加e.preventDefault()，阻止原生表单提交导致的页面刷新
• 移除了原代码中多余的双分号、handleChange里无意义的return和拿不到最新值的console逻辑

补充说明：原代码在setTask后立刻打印task拿到的是旧值，这是React状态异步批量更新的正常特性，不属于bug，如果需要调试最新状态值，可以通过useEffect监听状态变化后打印。

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