已解決430363個問題，去搜搜看，總會有你想問的

如何從 API 聲明數組來代替硬編碼數組？

首頁猿問如何從 API...

如何從 API 聲明數組來代替硬編碼數組？

JavaScript

楊__羊羊 2023-09-28 15:27:41

我得到了一些具有硬編碼數組的代碼的示例。我希望將其替換為使用 graphql 從 API 拉入的數組。下面是原始示例的代碼筆以及我嘗試過但無濟于事的另一個示例。我對 graphql 和 js 很陌生，所以很可能是一個業余錯誤，任何指示將不勝感激！原始代碼 - https://codesandbox.io/s/nice-saha-gwbwv我的筆 - https://codesandbox.io/s/quiet-wind-brq8s?file=/src/App.js

查看完整描述

1 回答

蕭十郎

TA貢獻1815條經驗獲得超13個贊

我會將您的組件結構更改為：

import React, { useState } from 'react'

import { graphql } from 'gatsby'

?const YourPage = ({data}) => {

? ?console.log('data is', data)

? ?const [filters, setFilters] = useState({

? ? type: "",

? ? category: ""

? });

//your calculations

? return (

? ? <div>

? ? ? Your stuff?

? ? </div>

? )

}

export const query = graphql`

? query yourQueryName{

? ? ? allStrapiHomes {

? ? ? ? nodes {

? ? ? ? ? type

? ? ? ? ? category

? ? ? ? }

? ? ? }

? }

export default YourPage

在您的代碼中，在進行一些關鍵導入時，您丟失了 Gatsby 的一些內容。如果您使用 a?staticQuery，則需要為其添加渲染模式。可能看起來有點老套，最好使用useStaticQueryGatsby 提供的鉤子或者添加頁面查詢（我的方法）。

我添加了頁面查詢。您的數據位于props.data.allStrapiHomes.nodes，解構道具您省略了第一步，因此您的數據將位于data.allStrapiHomes.nodes。如果在 Strapi 后端中這樣設置，則和type都將是一個數組。category

反對回復 2023-09-28

1 回答
0 關注
149 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何從 API 聲明數組來代替硬編碼數組？

如何從 API 聲明數組來代替硬編碼數組？

1 回答

添加回答

如何從 API 聲明數組來代替硬編碼數組？

如何從 API 聲明數組來代替硬編碼數組？