您好，我首先要說我對 React 和一般編碼很陌生。我目前正在閱讀 React Doc 和學習。很抱歉，如果這是微不足道的。
我在這里有一個問題代碼：https ://pastebin.com/rkwS1x66我正在嘗試根據用戶單擊按鈕來更新表格。我相信我的邏輯在實際渲染之前是可靠的。我的點擊處理功能作業正常，并且在切換時它可以通過 alert() 顯示 url 更改。問題是盡管 URL 變數發生了變化，但表格并沒有重新呈現。我希望表格基本上重新渲染并顯示不同的 API 呼叫。基本上，它應該顯示基于按鈕單擊動態呈現在表中的 SWAP api 或 Pokemon api。
該鏈接包含我的精簡代碼。我的專案包含更多代碼，但我認為這足以解決手頭的問題。
function HeaderSection() {
let baseUrl = "https://swapi.dev/api/people";
const [data, setData] = useState([]);
const [currentStatus , setStatus] = useState(false);
let urlToggle = false;
function urlChange(){
urlToggle = !urlToggle;
if(urlToggle)
{
baseUrl = "https://swapi.dev/api/people";
}
else
{
baseUrl = "https://pokeapi.co/api/v2/berry";
}
}
useEffect(()=>{
fetch(baseUrl)
.then((response) =>{
if(!response.ok)
{
return Promise.reject( new Error("Response Error!"));
}
else
{
return response.json();
}
})
.catch ( (err) =>{
console.log(err);
})
.then((json) => {
try{
setData(json.results);
setStatus(true);
}
catch
{
return Promise.reject(new Error(`State Error!: Data: ${data} , Connection:${currentStatus}`));
}
})
.catch((err) =>{
console.log(err);
})
},[baseUrl]);
return (
<div className='gio-main'>
<div className='gio-container-3'>
<h1>API Switch</h1>
<h4>Endpoint request using vanilla JS displayed in custom table</h4>
<p>You can switch between endpoints using this button!</p>
<button onClick={urlChange}>Change API</button>
{!currentStatus ? <h2>Loading... </h2> : <Table data={data}/>}
</div>
</div>
);
}
export default HeaderSection;uj5u.com熱心網友回復：
你的useEffect鉤子沒有觸發baseUrl
并改變data你期望的值的原因是這baseUrl不是一個狀態。
第二個引數，useEffect預期狀態串列，將導致useEffect狀態更改時觸發，因此使用“正常”變數不會導致鉤子觸發。
要修復它，只需更改baseUrl為useState. 在您的代碼中：
// change #1
const [baseUrl, setBaseUrl] = useState("https://swapi.dev/api/people");
//change #2
function urlChange(){
urlToggle = !urlToggle;
if(urlToggle)
{
setBaseUrl("https://swapi.dev/api/people");
}
else
{
setBaseUrl("https://pokeapi.co/api/v2/berry");
}
}
現在，當 baseUrl 更改時，useEffect鉤子將重新觸發。
useEffect docs - 查看“注釋”部分
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/448448.html
標籤：javascript 反应 休息 反应钩子 使用效果