如何在更新数组时重新渲染模式答案

【问题标题】：How to make modal re-render when array is updated如何在更新数组时重新渲染模式
【发布时间】：2022-06-27 23:11:35
【问题描述】：

我很确定这是一个简单的问题，但它难住了我。

跑下来：本质上，我有一个作为表格单元格显示在表格上的文件列表。当一个被选中时，它会突出显示并添加到一个数组中，我还可以通过再次单击它来从我的数组中删除一个项目。然后，一旦我点击一个按钮，数组就会使用 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>
);

}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你的代码有什么问题是你直接更新你的状态并且反应不要直接更新状态，如果它是一个引用类型，一个数组。所以你要做的就是使用 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);
}

【讨论】：