我對 React 相當陌生。我目前遇到的問題是我正在使用 Axios Get 請求回應來更新我的狀態變數之一。
但是，我目前面臨的問題是，由于狀態變數正在更新，App 被重新渲染，然后再次呼叫 Axios Get 請求（導致某種無限回圈）。
如何使 Get 請求可以更改變數，但不重新渲染組件并再次呼叫 Get 請求？
function App(props) {
let [sentenceData, setSentenceData] = React.useState({})
const renderEnglishSentence = useCallback(function () {
return <EnglishSentence sentenceData={sentenceData}/>;
}, [sentenceData]);
const fetchSentence = useCallback(function() {
return axios.get('http://localhost:3030/getrandomunusedsentence')
})
fetchSentence().then((response) =>
setSentenceData(response.data[0])
return (
<div>
{renderEnglishSentence()}
</div>
)
)
}
uj5u.com熱心網友回復：
const [sentenceData, setSentenceData] = React.useState({})
React.useEffect(() => {
axios.get('http://localhost:3030/getrandomunusedsentence')
.then(() => {
setSentenceData(response.data[0])
})
}, [])您可以在零依賴（[]）的 useEffect 鉤子中發出 http 請求
uj5u.com熱心網友回復：
為此，您將需要使用 useEffect 鉤子。這只會在第一次加載組件時呈現。
import React, { useState, useEffect } from 'react';
function App(props) {
useEffect(() => {
const fetchSentence = useCallback(function() {
return axios.get('http://localhost:3030/getrandomunusedsentence')
})
}, []);
}
uj5u.com熱心網友回復：
Api 呼叫應作為副作用處理。你應該使用 useEffect 鉤子，沒有 deps，所以它會在組件安裝后被呼叫。
useEffect(() => {
const fetch = async () => {
const response = await axios.get('http://localhost:3030/getrandomunusedsentence');
const data = await response.json();
setSentenceData(data);
}
fetch();
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399034.html
標籤：javascript 反应