Динамическое связывание React Router Dom дает неверные данные
Я пытаюсь создать динамическую страницу проекта, используя react router dom v6, используя params, выдает правильный идентификатор в консоли, но отображаемый проект неверен, вот пример:
"id: 7" - это проект один и неправильный, но "6" ниже - это идентификатор параметра, который является правильным.
Вот код страницы проекта:
export function ProjectPage() {
const {projectId} = useParams();
const project = filterData[projectId]
const {title, mediaUrl} = project;
console.info(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>
);
}´´´
Пожалуйста, отредактируйте вопрос, чтобы включить все соответствующие детали, данные и код, чтобы у нас был полный контекст для того, что сравнивается. Параметры маршрута имеют строковый тип всегда, а свойство id, которое вы упомянули, является числом. Убедитесь, что вы всегда используете безопасные для типов проверки на равенство. Основываясь на вашем ответе ниже, вы должны преобразовать свойство id в строку, то есть filterData.find((project) => String(project.id) === projectId).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Id (не paramsId) — это числовой тип, а paramsId (не Id) — это строковый тип.
Вы передали projectId, который является строковым типом, поэтому вам нужно преобразовать projectId в строковый тип с помощью метода toString().
Спасибо за ваш ответ! Хотя преобразование его в строку не было рабочим решением, мне пришла в голову идея превратить его в целое число, что отлично сработало.
Для будущих уведомлений решением было превратить projectId в целое число.
Вот рабочий код:
const { projectId } = useParams();
const [project, setProject] = useState();
useEffect(() => {
setProject(
filterData.find((project) => project.id === parseInt(projectId))
);
}, [projectId]);
Здесь вы сделали «const project = filterData [projectId]», что означает, что projectId будет действовать как индекс для массива filterData. Так как индекс всегда начинается с 0, поэтому отображается следующий проект.
Таким образом, вы можете сделать это как "const project = filterData[projectId-1]"
Вы можете добавить, что делает filterData?