React Router Dom 动态链接给出了错误的数据

Question

我正在尝试使用 react router dom v6 创建一个动态项目页面，使用参数在控制台中给出了正确的 id，但是显示的项目是错误的，这是一个例子：

“id:7”是项目一，是错误的，下面的“6”是params id，是正确的。

项目页面代码如下：

export function ProjectPage() {
  const {projectId} = useParams();
  const project = filterData[projectId]
  const {title, mediaUrl} = project;
  console.log(project, projectId)

  return (
    <div className={"project-page-body"}>
      <div className={"project-page-title"}>
        <h1 className={"project-item-title"}>{title}</h1>
        <p className={"description"}>
          Lorem ipsum filler text for project description.
        </p>
      </div>
      <div className={"project-page-image"}>
          <img src={mediaUrl} style={{width: "80vw", height: "auto" }}/>
      </div>
    </div>
  );
}´´´

Answer 1

Id(not paramsId)是数字类型，paramsId(not Id)是字符串类型。你传递的projectId是字符串类型，所以你需要用toString()方法将projectId转成字符串类型

Answer 2

为了将来通知，解决方案是将 projectId 转换为整数。

这是工作代码：

 const { projectId } = useParams();
  const [project, setProject] = useState();

  useEffect(() => {
    setProject(
      filterData.find((project) => project.id === parseInt(projectId))
    );
  }, [projectId]);

Answer 3

这里您完成了“const project = filterData[projectId]”，这意味着 projectId 将充当 filterData 的索引 array.So 因为索引始终从 0 开始，因此会显示下一个项目。

因此您可以将其设为“const project = filterData[projectId-1]”

React Router Dom 动态链接给出了错误的数据

React Router Dom Dynamic linking gives wrong data

javascript

reactjs

react-router-dom