Всем добрый вечер, как мне можно сделать так, чтобы выводился

text который принадлежит опеределённому title? сам роутер ведёт себя так:
<Route path="/article/:id/:title" element={<BlogPost />} />

jsx BlogPost компонентa:

function BlogPost() {
const { id, title } = useParams();
const [posts, setPosts] = useState([]);

useEffect(() => {
fetch("http://localhost:5000/api/posts")
.then((response) => response.json())
.then((data) => {
setPosts(data.posts);
console.log(data.posts)
})
.catch((error) => {
console.error("Ошибка получения данных:", error);
});
}, []);

const post = posts.find((post) => post.id === parseInt(id) && post.title === title);

return (
<div>
s
<h1>{post.text}</h1>
</div>
);
}


и прикладываю json файл в фото

у тебя запрос не асинхронный

не в этом дело, там ж then стоит

и ? перед фетчом нет эвейта и функция не асинхронная

function BlogPost() { const { id, title } = useParams(); const [posts, setPosts] = useState([]); useEffect(() => { (async () => { await fetch("http://localhost:5000/api/posts") .then((response) => response.json()) .then((data) => { setPosts(data.posts); console.log(data.posts) }) .catch((error) => { console.error("Ошибка получения данных:", error); }); })() }, []); const post = posts.find((post) => post.id === parseInt(id) && post.title === title); return ( <div> s <h1>{post.text}</h1> </div> ); } попробуй

если так function BlogPost() { const { id, title } = useParams(); const [posts, setPosts] = useState([]); useEffect(() => { fetch("http://localhost:5000/api/posts") .then((response) => response.json()) .then((data) => { setPosts(data.posts); console.log(data.posts) }) .catch((error) => { console.error("Ошибка получения данных:", error); }); }, []); const post = posts.find((post) => ((post.id === parseInt(id)) && (post.title === title))); return ( <div> s <h1>{post.text}</h1> </div> ); }

проблема в том

сверху ты был прав кстати)

тоже не то(((

await и then?

я не знал что эвейт это син сахар!