1 回答

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊
提供給 useEffect 的回調(diào)必須返回一個(gè)函數(shù)或未定義(如果提供了一個(gè)函數(shù),則這被認(rèn)為是一個(gè)清理函數(shù)。清理函數(shù)用于分離事件偵聽器,取消任何正在進(jìn)行的請(qǐng)求,并防止如果組件被卸載則進(jìn)行任何更新)
為了訪問您的http請(qǐng)求產(chǎn)生的響應(yīng),您應(yīng)該將其存儲(chǔ)在一個(gè)狀態(tài)中(您可以使用useState或useReducer)
const [rest, setResp] = React.useState();
React.useEffect(() => {
wait().then(_ => getData()).then(setResp);
}, [YOUR_DEPENDENCIES]);
// update jsx based on rest
根據(jù)您問題中的更新,您需要的是輪詢
請(qǐng)查看下面的示例(請(qǐng)記住,這是說明可能的解決方案的代碼)
function usePolling(fetcher, interval) {
const [payload, setPayload] = React.useState(null);
React.useEffect(function () {
// you must implement the error handling
fetcher()
.then(function (resp) {
setPayload(resp)
})
}, [fetcher]);
React.useEffect(function () {
let timeoutId;
function poll() {
timeoutId = setTimeout(function () {
// you must implement the error handling
fetcher()
.then(function (resp) {
setPayload(resp)
poll();
})
}, interval);
}
poll()
return function () {
clearTimeout(timeoutId);
}
}, [fetcher, interval]);
return payload;
}
function App() {
const payload = usePolling(function () {
return Promise.resolve(Date.now())
}, 3000);
return (
<div>polling payload: {payload}</div>
)
}
ReactDOM.render(<App/>, document.getElementById('app'))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
添加回答
舉報(bào)