無法將Google Sheet中的數字呈現在UI上

Simmonslin commented 1 year ago

已經將APPS SCRIPTS 設定成每執行一次，數字就會自動減1，但目前仍找不出將Google sheet數字呈現在UI上的方法

export function SubtractNumber(){

    var {IsLoading,Data}=useFetch(config.appScript)
    if (IsLoading){

        return <>
         <div className="text-light">Loading...</div>  </>
    } else{

        return <Card inventorynumber={Data}/>
     }

 }

原先設想是 card invemtorynumber是能儲存 google sheet 數字的variable

嘗試過 :

前端UI另外加上 < p id="data"> {props.inventorynumber}

，讓 variable 形成字串以 HTML 形式呈現在 HTML 上

export function Card(props){

    return <>

  <div>
  <meta charSet="utf-8" />
  <style dangerouslySetInnerHTML={{__html: "body{background-color:white;}" }} />
  <link href="./Ebookcard.css" rel="stylesheet" />
  <div className="ebookcard">
  <p id="data">{props.inventorynumber}</p>

}

但前端 UI 最後並沒有顯示出數字，目前仍在思考解決方式

猜測 2 : 可能index.js 的 root. render 串沒設定好 ( 直接寫會出現 error )

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Card inventorydata/>
  </React.StrictMode>
);

linttttt commented 1 year ago

不好意思，可以試試把index.js的<Card inventorydata/>換成<SubtractNumber/>，因為function SubtractNumber如果成功抓到data，應該就會return <Card inventorynumber={Data}/>

Simmonslin commented 1 year ago

今天有針對上次老師老師說的細節進行修正，包括將isloading, Data 的參數字母改成小寫，container bound 的 script 改成

Container bound

function doGet(e){

var sheet=SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1ClPQYntrITxEBsE3DFSgFfCHysvlwMOu235RWxKwiLc/edit#gid=0")
var getrange=sheet.getRange("A1")
var number=parseInt(getrange.getValue())

getrange.setValue(number-1)
var returnedValue=number 
return ContentService.createTextOutput(JSON.stringify(returnedValue)).setMimeType(ContentService.MimeType.JSON);

}

js

export function Card(props){
    return <>
  <div className="ebookcard">
  <p id="data">{props.inventorynumber}</p>
  <img src="https://img.onl/nyh6kK"  id= "e-reader" alt="Get Started"/>
    <div className="ebookcard-icon">
      <div className="ebookcard-icon-icon" >
      <img src="https://img.onl/2M7ndA" alt="Start" />
      </div>
      <div className="ebookcard-icon-iconName" />
    </div>
  </div>
  <div className="pill">
    <div className="pill-availability">
      <div className="pill-availability-icon" />
      <div className="pill-availability-number" />
    </div>
    <div className="pill-action">
        <img src="https://img.onl/Ti5HYi" alt="get started" />
      <div className="pill-action-type" />
    </div>
  </div>
</>
}

 export function SubtractNumber(){

    var {isLoading,data}=useFetch(config.appScript)
    if (isLoading){
        return <>
         <div className="text-light">Loading...</div>  
         </>
    } else{

        return <Card inventorynumber={data}/>
 }

 }

不過提取資料的狀態還是null ，想說可能是 react-fetch-hook框架本身的問題，想說進行以下修正

將react-fetch-hook 轉成到 react-use-fetch-hooks

但出現以下error ( 註 : 在node_modules 中找的到 react-use-fetch-hooks 的 index.js 檔 )

找不到模組 'react-use-fetch-hooks' 的宣告檔案。'c:/Users/ebook-inventory/bookcard-app/node_modules/react-use-fetch-hooks/dist/index.js' 隱含具有 'any' 類型。如有 `npm i --save-dev @types/react-use-fetch-hooks`，請嘗試使用，或新增包含 `declare module 'react-use-fetch-hooks';` 的宣告 (.d.ts) 檔案ts(7016)

不確定是不是作業系統問題?

tpemartin / ebook-inventory