使用next.js使用Sanity訪問PostArray中的陣列

我在嘗試訪問包含類別陣列的 Post 陣列時遇到問題。因此，如果我 console.log 資料，我會看到如下內容：

{
  posts: [
    {
      _createdAt: '2021-10-23T05:02:26Z',
      _type: 'post',
      _updatedAt: '2021-10-23T23:28:09Z',
      body: [Array],
      categories: [Array], <<<<-- this is the one I need to access
      mainImage: [Object],
      publishedAt: '2021-10-23T18:30:00.000Z',
      slug: [Object],
      title: 'Post Name title goes here'
    }
   .
   .
   .
  ]
}

我需要訪問 Post Array 中的類別 Array，但是我很難訪問它。我目前嘗試過這樣的事情：

 <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
  {posts.map(
    ({
      _id,
      title = "",
      slug = "",
      _createdAt = "",
      mainImage = "",
      categories = "",
    }) =>
      slug && (
        <div className="shadow-lg rounded-lg bg-white pb-5" key={_id}>
          <div className="px-6 py-4 text-left">
            <div className="flex flex-row mt-4 items-center">
              {categories && (
                <ul className="inline-flex my-3" style={{ listStyle: "none" }}>
                  {categories.map((category) => (
                    <li key={category}>
                      <span
                        className="mx-2 
                          items-center
                          justify-center
                          px-2
                          py-1
                          text-xs
                          font-bold"
                      >
                        {category}
                      </span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          </div>
        </div>
      )
  )}
</div>;

當我這樣做時，我收到以下錯誤：

物件作為 React 子物件無效（找到：帶有鍵 {_key, _ref, _type} 的物件）。如果您打算渲染一組子項，請改用陣列。

我什至嘗試做這樣的事情：

{posts.categories.map((category) => (
    <li key={category}>
      <span
        className="mx-2 
            items-center
            justify-center
            px-2
            py-1
            text-xs
            font-bold"
      >
        {category}
      </span>
    </li>
  ));
}

但仍然沒有運氣。關于我做錯了什么的任何想法？謝謝！

uj5u.com熱心網友回復：

你想要一個陣列陣列嗎？

const arrayOfArrayOfCategories = posts.map(post => post.categories);

如果您想訪問第一篇文章的類別：

const { categories } = posts[0];

uj5u.com熱心網友回復：

始終最好將代碼拆分以使其更容易。我會為 Post 創建一個單獨的組件，post作為一個道具。然后將其匯入到需要的地方。

Post.js

function Post({ post }) {
  const { categories } = post;

  function renderCategories() {
    return categories.map((category) => {
      return <span>{category}</span>;
    });
  }
  return <div>{renderCategories()}</div>;
}

export default Post;

應用程式.js

import Post from "./Post";

function App() {
  const posts = [
    {
      _createdAt: "2021-10-23T05:02:26Z",
      _type: "post",
      _updatedAt: "2021-10-23T23:28:09Z",
      body: [Array],
      categories: ["categoiry", "sfsdfd", "eosiefoise", "dseuhse"],
      mainImage: [Object],
      publishedAt: "2021-10-23T18:30:00.000Z",
      slug: [Object],
      title: "Post Name title goes here",
    },
    {
      _createdAt: "2021-10-23T05:02:26Z",
      _type: "post",
      _updatedAt: "2021-10-23T23:28:09Z",
      body: [Array],
      categories: ["categoiry", "sfsdfd", "eosiefoise", "dseuhse"],
      mainImage: [Object],
      publishedAt: "2021-10-23T18:30:00.000Z",
      slug: [Object],
      title: "Post Name title goes here",
    },
    {
      _createdAt: "2021-10-23T05:02:26Z",
      _type: "post",
      _updatedAt: "2021-10-23T23:28:09Z",
      body: [Array],
      categories: ["categoiry", "sfsdfd", "eosiefoise", "dseuhse"],
      mainImage: [Object],
      publishedAt: "2021-10-23T18:30:00.000Z",
      slug: [Object],
      title: "Post Name title goes here",
    },
  ];

  function renderPosts() {
    return posts.map((post) => {
      return <Post post={post} />;
    });
  }

  return <div>{renderPosts()}</div>;
}

uj5u.com熱心網友回復：

從錯誤看來，它categories是一個參考陣列。您需要決議 GROQ 查詢中的參考（類似于"categories": categories[]->），然后在前端，您需要使用每個物件的屬性category（在映射時創建categories）而不是整個物件本身。你會想像categories你所做的那樣進行映射，但在映射回呼函式中，你永遠不會直接參考整個物件。

而不是：

{posts.categories.map((category) => (
    <li key={category}>
      <span>
        {category}
      </span>
    </li>
  ));
}

你會想要做類似的事情（假設一個text屬性存在）：

{posts.categories.map((category) => (
    <li key={category._id}>
      <span>
        {category.text}
      </span>
    </li>
  ));
}

標籤：数组 反应 下一个.js 理智

上一篇：無法將第二個陣列物件值添加到javascript中的第一個物件陣列中

下一篇：對鏈接陣列進行排序