首先，請檢查我的代碼。
可能有拼寫錯誤！（我重寫了我的代碼）
const test = () => {
const [files, setFiles] = useState([]);
const handleFile = (e) => {
for(let i=0; i<e.target.files.length; i ){
setFiles([...files, e.target.files[i]
}
}
return (
{
files.map((file, index) => (
<div key={index}>
<p> {file[index].name} </p>
<button> Delete </button>
</div>
))
}
<label onChange={handleFile}>
<input type='file' mutiple /> Attach File
</label>
)
}
當我使用此代碼呈現時，會出錯，
型別錯誤：無法讀取未定義的屬性（讀取“名稱”）
{檔案[索引].name}
像這樣。
當我洗掉 .name 時，只呈現按鈕。（因為我沒有指定要呈現檔案屬性的內容。）
此外，我試圖一次渲染多個檔案。由于我將輸入型別設定為multiple，因此在選擇上傳內容時可以選擇多個檔案。
然而，即使我選擇了兩三個，它也只渲染了一個。
我希望我的解釋能很好地描述我的情況。如果您有任何問題，請問我！
期待收到你的訊息！
uj5u.com熱心網友回復：
如果在同一個處理函式中多次更新同一個狀態，只有最后一次呼叫才能解決性能問題。您必須將 onChange 處理程式更改為以下內容：
const handleFile = (e) => {
const newFiles = []
for(let i = 0; i < e.target.files.length; i ){
newFiles.push(e.target.files[i])
}
setFiles(newFiles)
}
同樣如另一個答案中所述，將“名稱”行更改為：
<p>{file.name}</p>
uj5u.com熱心網友回復：
對于和我有同樣問題的人來說，這是一個權宜之計。
const [files, setFiles] = useState([]);
const handleFile = (e) => {
setFiles([...files, e.target.files[0], e.target.files[1], e.target.files[2]])
if(e.target.files[1] == null) {
setFiles([...files, e.target.files[0]])
} if (e.target.files[1] && e.target.files[2] == null) {
setFiles([...files, e.target.files[0], e.target.files[1]])
}
};
使用條件陳述句，您可以控制檔案的索引。但是，我仍然不知道處理問題的其他方法是什么。
無論如何，希望我的回答對你有所幫助！
uj5u.com熱心網友回復：
我不確定我是否遺漏了什么，但我認為這樣回圈是多余的，而你可以簡單地做
const handleFile = (e) => {
setFiles(e.target.files)
}
此外，當您想訪問先前的狀態值時，您可能應該像這樣使用 setFiles 中的回呼函式來訪問先前的狀態值
for(let i=0; i<e.target.files.length; i ){
setFiles((prevfiles)=>[...prevFiles,e.target.files[i]])
}
uj5u.com熱心網友回復：
您不需要地圖內的 [index] 部分，因此應該如下所示
<p>{file.name}</p>
現在應該作業:)
多次上傳更新
const handleFile = (e) => {
const newSelectedArray = files;
newSelectedArray.push({
...e.target.files[0],
identifier: e.target.filename //check this please i cant remember what the array name is called for filename. You dont need this yet but once we get the first bit working we can include it in something cool.
});
setFiles(newSelectedArray)
}
讓我知道這個，因為它對我來說也是一場噩夢，所以希望這會奏效
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391776.html
標籤：javascript 反应 文件 数组.prototype.map