我正在嘗試創建一個從服務器獲取圖片的頁面，并且在下載所有圖片后顯示它們，但由于某種原因，當我更新狀態時頁面不會重新呈現。
我已經看到這個問題的其他答案，你必須將一個新陣列傳遞給setImages函式，而不是以前陣列的更新版本，我正在這樣做，但它仍然不起作用。
（有趣的是，如果我將 console.log 放入其中，useEffect它會在重新渲染陣列時記錄文本，但頁面不會顯示更新的資訊）
如果有人可以提供幫助將不勝感激！
這是我的代碼。
export function Profile() {
const user = JSON.parse(window.localStorage.getItem("user"));
const [imgs, setImages] = useState([]);
const [num, setNum] = useState(0);
const [finish, setFinish] = useState(false);
const getImages = async () => {
if (finish) return;
let imgarr = [];
let temp = num;
let filename = "";
let local = false;
while(temp < num 30) {
fetch("/get-my-images?id=" user.id "&logged=" user.loggonToken "&num=" temp)
.then(response => {
if(response.status !== 200) {
setFinish(true);
temp = num 30;
local = true;
}
filename = response.headers.get("File-Name");
return response.blob()
})
.then(function(imageBlob) {
if(local) return;
const imageObjectURL = URL.createObjectURL(imageBlob);
imgarr[temp - num] = <img name={filename} alt="shot" className="img" src={imageObjectURL} key={temp} />
temp ;
});
}
setNum(temp)
setImages(prev => [...prev, ...imgarr]);
}
async function handleClick() {
await getImages();
}
return (
<div>
<div className="img-container">
{imgs.map(i => {
return (
i.props.name && <div className="img-card">
<div className="img-tag-container" onClick={(e) => handleView(i.props.name)}>{i}</div>
<div className="img-info">
<h3 className="title" onClick={() => handleView(i.props.name)}>{i.props.name.substr(i.props.name.lastIndexOf("\\") 1)}<span>{i.props.isFlagged ? "Flagged" : ""}</span></h3>
</div>
</div>
)
})}
</div>
<div className="btn-container"><button className="load-btn" disabled={finish} onClick={handleClick}>{imgs.length === 0 ? "Load Images" : "Load More"}</button></div>
</div>
)
}
uj5u.com熱心網友回復：
我認為您創建新陣列的方法是正確的。您正在將更新程式回呼傳遞給 useState() 更新程式函式，該函式回傳先前影像和新影像的串聯，這應該回傳一個新陣列。
使用基于集合的狀態變數時，我強烈建議設定key渲染子項的屬性。您是否嘗試過為 分配唯一鍵<div className="img-card">？它似乎i.props.name是獨一無二的，足以作為一把鑰匙。
鍵是 React 如何將集合中的單個專案與它們對應的渲染 DOM 元素相關聯。如果您修改該集合，它們尤其重要。每當呈現集合出現問題時，我總是確保鍵是有效且唯一的。即使添加密鑰不能解決您的問題，出于性能原因，我仍然強烈建議您保留它。
uj5u.com熱心網友回復：
它與javascript的Array特性有關。控制臺日志的原因與控制臺日志列印時刻有關。因此，它應該稍后顯示為您更新。
有幾種方法。
const getImages = async () => {
... ...
setNum(temp)
const newImage = [...prev, ...imgarr];
setImages(prev => newImage);
}
const getImages = async () => {
... ...
setNum(temp)
setImages(prev => JOSN.parse(JSON.object([...prev, ...imgarr]);
}
const getImages = async () => {
... ...
setNum(temp)
setImages(prev => [...prev, ...imgarr].slice(0));
}
也許它可以作業。希望對您有所幫助。
uj5u.com熱心網友回復：
好的，對我來說問題是服務器沒有發送正確的filename標頭，因此它始終為空，因此條件i.props.name永遠不會為真......哈哈，很抱歉造成混亂。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492928.html
標籤：javascript 反应 反应钩子