React待办列表任务数组sort排序无效、map功能正常问题求助

问题原因 #

你的排序不生效是两个问题共同导致的：

• 直接修改React状态不符合不可变规范：Array.sort()是原地修改方法，会直接变更传入的原数组，你直接对props传入的、来自state的tasks数组执行sort，相当于直接修改React状态，会引发渲染异常
• 日期格式解析错误：你的selectedDate用的是日/月/年格式，但JS原生new Date()默认按月/日/年解析，比如27/09/2021会被识别为第27个月，属于无效日期，getTime()返回的都是NaN，排序逻辑自然不会生效

修正后的代码 #

const Tasks = ({ tasks, onDelete, onToggle }) => {
  // 先拷贝原数组，避免直接修改state
  const sortedTasks = [...tasks].sort((a, b) => {
    // 手动解析DD/MM/YYYY格式的日期
    const parseDate = (dateStr) => {
      const [day, month, year] = dateStr.split('/').map(Number);
      return new Date(year, month - 1, day).getTime();
    };
    return parseDate(a.selectedDate) - parseDate(b.selectedDate);
  });

  return (
    <>
      {sortedTasks.map((task) => (
        <Task
          key={task.id}
          task={task}
          onDelete={onDelete}
          onToggle={onToggle}
        />
      ))}
    </>
  );
};

export default Tasks;

改动说明 #

• 通过展开运算符[...tasks]创建原数组的浅拷贝，仅对拷贝后的数组执行排序，不会触碰原state数据，符合React的不可变数据要求
• 新增手动解析日期的逻辑，按日/月/年的格式拆分字符串后再传入Date构造函数（Date的月份参数从0开始计数，所以拆分后要减1），完全避免日期解析错误
• 排序回调直接返回两个时间戳的差值即可，不需要额外写三元判断，逻辑更简洁

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