首頁(yè) 猿問(wèn) 如何從 API...

如何從 API 聲明數(shù)組來(lái)代替硬編碼數(shù)組？

JavaScript

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

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

查看完整描述

1 回答

蕭十郎

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊

我會(huì)將您的組件結(jié)構(gòu)更改為：

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

在您的代碼中，在進(jìn)行一些關(guān)鍵導(dǎo)入時(shí)，您丟失了 Gatsby 的一些內(nèi)容。如果您使用 a?staticQuery，則需要為其添加渲染模式。可能看起來(lái)有點(diǎn)老套，最好使用useStaticQueryGatsby 提供的鉤子或者添加頁(yè)面查詢（我的方法）。

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

反對(duì) 回復(fù) 2023-09-28