NextJS未显示静态JSON文件中的内容

发布于 2025-01-22 10:13:41 字数 1536 浏览 1 评论 0原文

我接下来是个新手，但这是问题。我有一个静态JSON文件，它是我项目目录的根源，如下所示

{"data":[{"id":1,"attributes":{"name":"Test Product 1","content":"Stvarno ne znam sta bi dodao ovdje jer samo testiram","meta_description":"Opis koji moze da stoji u meti / SEO i to","meta_title":"Testni Product - Lion Kingdom","price":12.99,"slug":"test-product-1","createdAt":"2022-04-17T12:12:36.787Z","updatedAt":"2022-04-17T12:12:39.540Z","publishedAt":"2022-04-17T12:12:39.531Z"}},{"id":2,"attributes":{"name":"Test Product 2","content":"Jos jedan testni post da testiram producte v2","meta_description":"Neki opis za metu","meta_title":"Testni Product 2 - Lion Kingdom","price":49700,"slug":"test-product-2","createdAt":"2022-04-17T12:15:04.241Z","updatedAt":"2022-04-17T12:15:05.078Z","publishedAt":"2022-04-17T12:15:05.075Z"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":2}}}

，我试图将其作为在网站上使用的道具，但由于某些未知原因，编译器没有显示任何错误，但是DIV仍然显示为空的，没有从JSON中获取任何内容。将其设置

这是我在下一个定义上方定义它

import products from '../products.json'

的方式，然后在体内


export default function index() {
  return (
    <div>
      <Head>
      <title> ECommerce Alpha</title>
      <link rel="icon" href="/favicon.ico" />
      </Head>

    {products.data.map(product => {
      <div key={product.attributes}>
       <div>{product.attributes.name}</div>
      </div>
    })}


    </div>
  )
}

为空白页，如果有人可以指出为什么接下来没有从文件中静态地获取它，我会欣赏它:)

原文

I'm relatively new to Next, but here is the issue. I've got a static JSON file which is in the root of my project directory and is as follows

{"data":[{"id":1,"attributes":{"name":"Test Product 1","content":"Stvarno ne znam sta bi dodao ovdje jer samo testiram","meta_description":"Opis koji moze da stoji u meti / SEO i to","meta_title":"Testni Product - Lion Kingdom","price":12.99,"slug":"test-product-1","createdAt":"2022-04-17T12:12:36.787Z","updatedAt":"2022-04-17T12:12:39.540Z","publishedAt":"2022-04-17T12:12:39.531Z"}},{"id":2,"attributes":{"name":"Test Product 2","content":"Jos jedan testni post da testiram producte v2","meta_description":"Neki opis za metu","meta_title":"Testni Product 2 - Lion Kingdom","price":49700,"slug":"test-product-2","createdAt":"2022-04-17T12:15:04.241Z","updatedAt":"2022-04-17T12:15:05.078Z","publishedAt":"2022-04-17T12:15:05.075Z"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":2}}}

Now I'm trying to pass it as a prop to use it on the website, but am not able to for some unknown reason, the compiler shows no errors but yet the div still shows up empty not fetching anything from the json. Here is how I set it up in next

Defining it up top

import products from '../products.json'

and then in the body


export default function index() {
  return (
    <div>
      <Head>
      <title> ECommerce Alpha</title>
      <link rel="icon" href="/favicon.ico" />
      </Head>

    {products.data.map(product => {
      <div key={product.attributes}>
       <div>{product.attributes.name}</div>
      </div>
    })}


    </div>
  )
}

The result is yet a blank page, if someone could point out why next is not fetching it statically from a file I would appreciate it :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

澉约 2025-01-29 10:13:41

正在看到一个空白页

{products.data.map((product) => {
  // this is a block body (i.e., opened with a brace), so you need a `return`
  return (
    <div key={product.id}>
      <div>{product.attributes.name}</div>
    </div>
  );
})}

您通过不使用牙套：

{products.data.map((product) => (
  // group with parentheses instead
  <div key={product.id}>
    <div>{product.attributes.name}</div>
  </div>
))}

You're seeing a blank page because your map()'s arrow function is missing an explicit return statement:

{products.data.map((product) => {
  // this is a block body (i.e., opened with a brace), so you need a `return`
  return (
    <div key={product.id}>
      <div>{product.attributes.name}</div>
    </div>
  );
})}

You can make the return implicit by not using braces:

{products.data.map((product) => (
  // group with parentheses instead
  <div key={product.id}>
    <div>{product.attributes.name}</div>
  </div>
))}

回复收藏 0 原文

~没有更多了~

关于作者

下雨或天晴

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

NextJS未显示静态JSON文件中的内容

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

NextJS未显示静态JSON文件中的内容

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。