我很確定這是一個簡單的問題，但它難倒了我。
跑下來：基本上我有一個檔案串列顯示在表格上作為表格單元格。當一個被選中時，它會突出顯示并添加到一個陣列中，我還可以通過再次單擊它來從我的陣列中洗掉一個專案。然后，一旦我點擊一個按鈕，陣列就會使用 setState() 添加到一個狀態，其中您有一個模式，其中包含另一個包含您選擇的檔案的表和一個從表/陣列中洗掉它們的按鈕。
問題：我的問題是，在我第一次渲染我的模式后，它拒絕更新。我嘗試過使用 useeffect 等，但到目前為止沒有任何效果。我可以通過重新加載整個頁面來使其“作業”，但這顯然并不理想。因此，任何建議將不勝感激。同樣在代碼下方，您可以假設檔案只是一個物件陣列，也就是具有幾個特征的檔案。
代碼：
export default function ConfirmBtn({files}){
const [possibleFiles,setPossibleFiles] = useState([])
const removeFile = (fileToRemove) =>{
for(let i = 0; i < files.length;i ){
if(files[i] == fileToRemove){
possibleFiles.splice(i,1)
}
}
}
const mapSelectedFiles = () => {
return(
possibleFiles.map(file=>(
getFiles(file)
)))
}
const getFiles = (file) =>{
return(
<tr key = {file.id} >
<td>{file.cal_id file.e_id}</td>
<td><button id = {file.f_name} onClick={()=>{removeFile(file)}}>Remove</button></td>
</tr>
)
}
return(
<div className='modealBackgroud'>
<button type="button" class="btn btn-primary mt-5 center-block" data-bs-toggle="modal" data-bs-target="#exampleModal" onClick={()=>{setPossibleFiles(files)}}>
Plot
</button>
<div class="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Families Choosen</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table table-hover">
<thead>
<tr>
<th>File</th>
</tr>
</thead>
<tbody>
{mapSelectedFiles()}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
);
}
uj5u.com熱心網友回復：
您的代碼中的問題是您正在直接更新您的狀態并且如果它是參考型別（陣列是），則不要直接更新狀態。所以你要做的是使用 setPossibleFiles([...newArray] 來更新狀態。
注意：不要直接更新狀態總是使用 setState 方法來更新狀態。直接更改狀態是一種不好的模式，您的代碼可能無法正常作業。
const [possibleFiles,setPossibleFiles] = useState([])
const removeFile = (fileToRemove) =>{
const newPossibleFilesState = [...possibleFiles];
for(let i = 0; i < newPossibleFilesState.length;i ){
if(newPossibleFilesState[i] === fileToRemove){
newPossibleFilesState.splice(i,1)
}
}
setPossibleFiles(newPossibleFilesState);
}uj5u.com熱心網友回復：
如果您使用這樣的filter方式洗掉專案，它會更清潔
const [possibleFiles,setPossibleFiles] = useState([])
const removeFile = (fileToRemove) =>{
setPossibleFiles(files => files.filter(file => file.id !== fileToRemove.id));
}
uj5u.com熱心網友回復：
我認為您應該創建一個臨時變數來存盤剩余檔案（同時洗掉所選檔案）。并呼叫 setPossibleFiles()。
const removeFile = (fileToRemove) =>{
let newFiles = possibleFiles.filter(file => file.id !== fileToRemove.id);
setPossibleFiles(newFiles)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/495798.html
標籤：javascript 反应