リモートAPIから取得されている状態変数に応じて変数を設定しようとしています -- reactjs フィールド と gatsby フィールド と use-state フィールド 関連 問題

Trying to set a variable depending on the state variable that is fetch from a remote api












0
vote

問題

日本語

クエリデータをフェッチしてから、応答に返されるRecordCountに応じて、ページ設定に必要なページ数を計算します。 応答が受信され、状態変数が設定されたら、CODEを取得できませんでした。

<事前> <コード> import React, { useState, useEffect, useMemo } from "react" import { Link } from "gatsby" import { withAuthenticator, Loading } from 'aws-amplify-react' import request from "../utilities/request" import SEO from "../components/seo" import Container from 'react-bootstrap/Container' import Row from 'react-bootstrap/Row' import Col from 'react-bootstrap/Col' import Table from 'react-bootstrap/Table' import { currLocale, formatDate } from '../utilities/formatting' const ProductionOrders = (props) => { let offset = 0 let records = 20 const [orders, setOrders] = useState({}) const [isLoading, setIsLoading] = useState(true) //const [totalPages, setTotalPages] = useState() function isEmpty(obj) { for (var key in obj) { if (obj.hasOwnProperty(key)) return false; } return true; } useEffect(() => { async function fetchOrders() { const url = `${process.env.ERP_API_URL}/production-orders?offset=${offset}&records=${records}` const response = await request(url) .catch(err => console.log(err)) setIsLoading(false) if (response === undefined) { return } console.log(response) const body = response.body if (!body) { return } setOrders(JSON.parse(body)) console.log(orders) } fetchOrders() }, [offset]) const totalPages = useMemo(() => { console.log(`TotalPages:${orders[0].recordCount}`) if (isEmpty(orders)) { return } return (orders[0].recordCount) },[orders]) return ( ..... some html )} export default .....
英語

I am fetching a query data, and then depending on the recordcount which is returned in the response, calculate the number of pages needed for pagination. I could not the get the code to calculate totalpage count once the response is received and the state variable is set.

import React, { useState, useEffect, useMemo } from "react" import { Link } from "gatsby" import { withAuthenticator, Loading } from 'aws-amplify-react' import request from "../utilities/request" import SEO from "../components/seo" import Container from 'react-bootstrap/Container' import Row from 'react-bootstrap/Row' import Col from 'react-bootstrap/Col' import Table from 'react-bootstrap/Table' import { currLocale, formatDate } from '../utilities/formatting'    const ProductionOrders = (props) => {   let offset = 0   let records = 20   const [orders, setOrders] = useState({})   const [isLoading, setIsLoading] = useState(true)   //const [totalPages, setTotalPages] = useState()     function isEmpty(obj) {     for (var key in obj) {       if (obj.hasOwnProperty(key))         return false;     }     return true;   }   useEffect(() => {     async function fetchOrders() {       const url = `${process.env.ERP_API_URL}/production-orders?offset=${offset}&records=${records}`       const response = await request(url)         .catch(err => console.log(err))       setIsLoading(false)       if (response === undefined) { return }       console.log(response)       const body = response.body       if (!body) { return }        setOrders(JSON.parse(body))              console.log(orders)      }      fetchOrders()    }, [offset])  const totalPages = useMemo(() => {   console.log(`TotalPages:${orders[0].recordCount}`)   if (isEmpty(orders)) { return }   return (orders[0].recordCount) },[orders])  return ( ..... some html )} export default ..... 
</div
        

回答リスト


関連する質問

0  反応矢印関数初期状態のみを受信します  ( React arrow function receiving the initial state only ) 
ボタンで設定したタイマーをやっています。私はいくつかの州を実行していますが、私の矢印関数のバックライスでは、Timerrの初期状態を受け取ります。 ここにコード; <事前> <コード> export default function TimeTracker(...

-1  ClarifaiのAPIをReactのUSESTATEとUSEEFFECTで使用すると、400の悪いリクエストAPI呼び出し  ( 400 bad request api call when using clarifais api with reacts usestate and use ) 
私がインストールしたドラッグアンドドロップパッケージであるReact-Dropzoneを介してClarifaiのAPIを使用して、画像内の顔とオブジェクトを認識するアプリを構築しようとしています。静的な画像を使用するとき、私はいかなるエラーと共にクラリファイか...

0  Reactフックを使用してAPIを使用して複数の状態を初期化できますか?  ( How can i initialize multiple states with api with react hooks ) 
versions 、<コード>、<コード>、<コード> + echo force-unlock e4014910-6b34-47a7-ad93-51842a63f0fa -var ''''environment=qa'''' force-unlock e4...

1  アレイとしてのUSESTATEと初期値が機能しません  ( Usestate and initial value as array does not work ) 
私はプロジェクトでReactフックを使用しようとしています、そして、私は値として配列を使用するときに私はUSESTATEに問題があります。 下記のコードで表示されるときは、 zoneItems を items 配列にする必要がある場合は、常に空の配列を取得しま...

2  ソケットコールバック内の古い状態  ( Stale state inside socket callback ) 
私は反応フックを使ってソケット接続をしようとしていました。ソケットコールバック関数内の状態変数にアクセスしようとすると、古い値が得られています。 <コード> users Socketコールバック内の変数は最新の値を持ちません。 useRef の使用は機能し...

0  同時にそれを異なるアレイに追加しながら1つの配列からオブジェクトを削除する - Reactフック  ( Removing object from one array while simultaneously adding it to a different arr ) 
私はTinderのようなアプリに取り組んでいて、現在のカードを配列から削除して、次のようなボタンをクリックしてから次のカードを移動しようとしています。同時に、カードを新しい配列に追加しようとしています(好きか嫌いなリスト)。新しいアレイにオブジェクトを追加する...

0  USESTATEを反応させる:ボタンの入力とonClickのonchangeを使用して弊社のUSESTATEを更新することができますか?  ( React usestate how can i update my usestate with onchange for input and onclick ) 
私はUSESTATEフックを更新しようとしていますが、オブジェクトは空を返します。 <input onChange={e => setFilter(name: e.target.value)} > のようなものを使用しようとしましたが、各キーストロークに送信...

-1  USESTATE()を更新して最初の位置にプッシュする方法  ( How to update usestate and push to first position ) 
<コード> const [projects, setProjects] = useState([]) プロジェクトを更新することができますが、最初の位置でプロジェクトをプッシュするにはどうすればよいですか? 私はを使っています <事前> <コード> setP...

2  私が反応中のアレイを更新しているときは、初期状態にデフォルトになっています。私は何が悪いのですか?  ( When i am updating an array in react usestate it keeps defaulting to the initia ) 
私は州の配列、月次インバイダを持っていて、この配列の内部は12の数字が満たされています。オンラインで研究した後、これを達成する1つの方法は、配列をコピーし、要素を更新してから最後に状態を更新することでした。私はこれを試してみましたが、それは正しく機能していませ...

0  アレイの条件付きレンダリングと維持されたアレイのフィルタバージョン  ( Conditional rendering of a array and a filtered version of the array with usesta ) 
リクティブに要素の配列をレンダリングしようとしているので、要素の配列を覆うときに要素の配列をフィルタリングし、hovered要素だけで再レンダリングします。ポジションを維持するのはバギーですが今の心配はありません。 それは動作しますが、ホバー要素がレンダリング...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有