React/JS 新手在這里。
我有一個簡單的反應應用程式，頁面從ItemCounterAPI-Gateway 獲取數字。該代碼現在可以作業，它能夠從 lambda/apig url 中獲取一個值。
import React, { useState, useEffect } from "react";
const Stats = () => {
const [ItemsSupplied, setItemsSupplied] = useState(0);
useEffect(async () => {
signIn();
}, []);
async function signIn() {
// Async Signin functions and calls, followed by getData() call
getData();
}
async function getData() {
let url = "https://re1szvliqk.execute-api.us-east-2.amazonaws.com/ItemCounter";
const response = await fetch(url);
const number = await response.json();
setItemsSupplied(number);
}
return (
<div>
<span> Items Supplied: {ItemsSupplied} </span>
</div>
);
};
export default Stats;
我正在尋找一種定期重繪 /更新此值的方法，假設每 5 秒一次，但無法弄清楚。
試過這個：每 3 秒更改一次文本 React useEffect，但無法將它與我的頁面合并并遇到錯誤。錯誤與以下事實有關signIn()，因此getData()已經在useEffect().
希望有人能幫幫我，謝謝！
uj5u.com熱心網友回復：
您需要再添加一個useEffect，您需要在其中設定每 5 秒的間隔。
import React, { useState, useEffect } from "react";
const Stats = () => {
const [ItemsSupplied, setItemsSupplied] = useState(0);
useEffect(() => {
signIn();
}, []);
useEffect(() => {
let timer = setInterval(()=>getData(),5000)
return ()=>clearInterval(timer)
},[ItemsSupplied]);
async function signIn() {
// Async Signin functions and calls, followed by getData() call
getData();
}
async function getData() {
let url = "https://re1szvliqk.execute-api.us-east-2.amazonaws.com/ItemCounter";
const response = await fetch(url);
const number = await response.json();
setItemsSupplied(number);
}
return (
<div>
<span> Items Supplied: {ItemsSupplied} </span>
</div>
);
};
export default Stats;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/441528.html
標籤：javascript 反应 网络
上一篇：在Dropdown中動態添加選項