請先看我的代碼。
我從資料庫中獲取 1 到 3 個檔案，具體取決于作者上傳了多少檔案。最大值為 3，如果沒有，則呈現“沒有檔案”。
為了靈活地渲染檔案，我使用了三個條件陳述句。但是，它太亂了，我認為可能有比這更好的主意。
const innerPost = () => {
const [files, setFiles] = useState([]);
const [deletedFilePk, setDeletedFilePk] = useState([]);
const deleteFile1 = () => {
setDeletedFilePk([...deletedFilePk, filePkNum]);
console.log(deletedFilePk);
};
const deleteFile2 = () => {
setDeletedFilePk([...deletedFilePk, filePkNum 1]);
console.log(deletedFilePk);
};
const deleteFile3 = () => {
setDeletedFilePk([...deletedFilePk, filePkNum 2]);
console.log(deletedFilePk);
};
return (
<>
{files.map((file) => {
if (file.length == 0) {
return (
<div>
<h5>THERE IS NO FILE.</h5>
</div>
);
}
if (file.length == 1) {
return (
<div>
<div>
<a
href={`/api/store/download-noticeboard-file fileId=${filePkNum}`}
>
{file[0]}
</a>
<Button
size='small'
onClick={deleteFile1}
>
delete
</Button>
</div>
</div>
);
}
if (file.length == 2) {
return (
<div>
<div>
<a
href={`/api/store/download-noticeboard-file?fileId=${filePkNum}`}
>
{file[0]}
</a>
<Button
size='small'
onClick={deleteFile1}
>
delete
</Button>
</div>
<div>
<a
href={`/api/store/download-noticeboard-file?fileId=${filePkNum 1}`}
>
{file[1]}
</a>
<Button
size='small'
onClick={deleteFile2}
>
delete
</Button>
</div>
</div>
);
}
if (file.length == 3) {
return (
<div>
<div>
<a
href={`/api/store/download-noticeboard-file?fileId=${filePkNum}`}
>
{file[0]}
</a>
<Button
size='small'
onClick={deleteFile1}
>
delete
</Button>
</div>
<div>
<a
href={`/api/store/download-noticeboard-file?fileId=${filePkNum 1}`}
>
{file[1]}
</a>
<Button
size='small'
onClick={deleteFile2}
>
delete
</Button>
</div>
<div>
<a href={`/api/store/download-noticeboard-file?fileId=${filePkNum 2}`}></a>
<Button
size='small'
onClick={deleteFile3}
>
delete
</Button>
</div>
</div>
);
}
})}
</>
);
};
export default innerPost;
我需要一些智慧！
uj5u.com熱心網友回復：
您可以映射陣列并顯示每個專案并為您的函式使用 index 屬性：
const innerPost = () => {
const [files, setFiles] = useState([]);
const [deletedFilePk, setDeletedFilePk] = useState([]);
const deleteFile = (index) => {
setDeletedFilePk([...deletedFilePk, index]);
console.log(deletedFilePk);
}
if (file.length == 0) {
return (
<div>
<h5>THERE IS NO FILE.</h5>
</div>
);
} else {
files.map((file, index) => {
return (
<div>
<a
href={`/api/store/download-noticeboard-file fileId=${index}`}
>
{file}
</a>
<Button
size='small'
onClick={() => deleteFile(index)}
>
delete
</Button>
</div>
);
})
}
};
export default innerPost;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/383698.html
標籤：javascript 反应 for循环