我有一個圖像上傳元件，用戶可以一次上傳一張或多張圖像。當用戶上傳圖像時，我總是嘗試使用 useState() 更新狀態。但狀態並沒有在第一時間更新。我如何更新以下程式碼才能使其正常工作。
import React from 'react';
import './style.css';
import React, { useState } from 'react';
export default function App() {
const [file, setFile] = useState([]);
const uploadImages = (event) => {
console.log('NewFile=>', event.target.files);
setFile([...file, ...event.target.files]);
console.log('UpdatedFiles=>', file);
};
return (
<div>
<input
multiple
type="file"
name="photo"
id="photo"
accept="image/*"
capture="environment"
onChange={(event) => uploadImages(event)}
/>
</div>
);
}
https://stackblitz.com/edit/react-ujcbjh?file=src/App.js
每當您將 useState 與非原始類型一起使用時，您應該小心。
React 文件中的這兩頁將為您提供一些說明：
#簡而言之，react 使用
Object.is來決定在呼叫setState之間狀態是否會變更。對於物件和數組，即使其內容發生變化，這也可能傳回 true。在 React 中，useState 鉤子不會立即更新狀態。狀態更新是異步的，這意味著在呼叫狀態設定函數後更新的狀態值可能無法立即可用。
要解決此問題，您可以使用 useEffect 掛鉤來偵聽檔案狀態的更改，並在更新時執行任何必要的操作。這是程式碼的更新版本，其中包含 useEffect 掛鉤：
import React, { useState, useEffect } from 'react'; import './style.css'; export default function App() { const [file, setFile] = useState([]); const uploadImages = (event) => { console.log('NewFile=>', event.target.files); setFile([...file, ...event.target.files]); }; useEffect(() => { console.log('UpdatedFiles=>', file); }, [file]); return (
uploadImages(event)}
/>
);
}在此更新的程式碼中，我們新增了一個 useEffect 掛鉤，該掛鉤透過將 file 指定為 useEffect 掛鉤的第二個參數數組中的依賴項來偵聽檔案狀態的變更。每當檔案狀態更新時，useEffect 回呼函數內的程式碼就會執行。您可以使用 useEffect 掛鉤中更新的檔案值執行任何必要的操作。
透過使用 useEffect 掛鉤，您應該會看到狀態更新後正確記錄了更新的狀態值。