如何根据获取的 JSON 重写 URL

Question

我正在通过 JSON 中的一个数组进行映射，从中我可以得到我需要的所有信息。

例如我获取了 博客文章 卡片 -> 标题、简短描述、发布日期及其网址。所以卡片是基于来自 json 的 url 链接的 - 当我点击时我会去新页面，例如 -> 点击博客 n.1 -> 重定向到 mywebsite/blogNumberOne，但当然页面不存在。

我有另一个 JSON 文件，它在所有博客的中间名中 -> 所以如果我采用该 json 并将正确的参数放入它 -> (blogNumberOne) -> 它给出我的新 json 包含该帖子中的所有信息。

我需要做的是以某种方式连接它并让我的应用程序理解现在我点击博客 n.1，因此它必须转到 /blogNumberOne 并从博客 n.1 中给我所有正确的信息。当然，这同样适用于每篇博文。

我知道我需要向 json 发出请求，但我就是不知道为什么。

这是我用于打印博客的内容：

useEffect(() => {
        fetch('myJSONurl')
            .then((resp) => resp.json())
            .then((data) => {
                setGuides(data.guides);
                console.log(data);
            });
    }, []);


// mapping through

 {guides.map((blog) => {
                                return (
                                        <Card style={{ width: '15rem' }}>
                                            <Card.Img
                                                variant="top"
                                                src={blog.img}
                                            />
                                            <Card.Body>
                                                <Card.Title>
                                                    {blog.title}
                                                </Card.Title>
                                                <a
                                                    href={blog.url}
                                                    class="stretched-link"
                                                ></a>
                                            </Card.Body>
                                        </Card>
                               

Answer 1

在您的应用中创建page 状态：

const [page, setpage] = useState(1);

然后在页面更改时，获取相应的数据：

useEffect(() => {
  // Fetch data according to current page
  fetch(`${JSONURL}/${page}`)
},[page]);


// Then map the data
page.map(data => ....)

当你点击一篇博文时，它应该有一些id，这样你就可以从中获取数据：

{
  posts.map(post => <BlogPost onClick={() => setPage(/*here mention something unique to each post to fetch data*/post.id)} />)

}