React中点击react-router-dom的Link后子组件未渲染问题排查

点击Task组件后URL成功变化，但TaskComponent的内容无法显示，问题出在以下几个关键细节：

核心问题分析 #

1. filter 返回数组而非单个对象：Tasks.filter(...) 返回的是包含匹配项的数组，即使只有一个结果，你也不能直接通过 task.title 访问属性——因为数组本身没有该属性。
2. 判断条件失效：空数组属于「真值」，所以 if (!task) 永远不会触发，导致后续尝试访问数组的 title/author_name 属性时得到 undefined，最终没有内容渲染。

修复步骤 #

1. 替换 filter 为 find #

find 方法会返回第一个匹配条件的对象，没有匹配项则返回 undefined，正好符合我们获取单个任务的需求：

// 原代码
const task = Tasks.filter((task) => String(task.id) === id);

// 修改后
const task = Tasks.find((task) => String(task.id) === id);

2. 修正空值判断逻辑 #

现在 task 会是单个对象或 undefined，直接判断 if (!task) 就能正确触发无任务的提示：

if (!task) {
  return <div>No Task</div>;
}

3. 完整修改后的 TaskComponent #

import React from "react";
import { useParams } from "react-router-dom";

const TaskComponent = ({ Tasks }) => {
  const { id } = useParams();

  // 使用find获取单个任务对象
  const task = Tasks.find((task) => String(task.id) === id);

  if (!task) {
    return <div>No Task</div>;
  }

  return (
    <div className="wrapper">
      <div>
        <h3>{task.title}</h3>
        <h4>{task.author_name}</h4>
      </div>
    </div>
  );
};

export default TaskComponent;

额外优化（可选） #

如果Tasks数组较大或组件频繁渲染，可以用useMemo缓存结果，避免重复计算：

import React, { useMemo } from "react";
import { useParams } from "react-router-dom";

const TaskComponent = ({ Tasks }) => {
  const { id } = useParams();

  const task = useMemo(() => {
    return Tasks.find((task) => String(task.id) === id);
  }, [Tasks, id]);

  if (!task) {
    return <div>No Task</div>;
  }

  return (
    <div className="wrapper">
      <div>
        <h3>{task.title}</h3>
        <h4>{task.author_name}</h4>
      </div>
    </div>
  );
};

export default TaskComponent;

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