React中useState存储的函数在重渲染时被立即调用的问题

你的问题出在组件事件绑定错误，加上props命名混淆导致的逻辑误解，最终触发了意外的删除操作。

核心原因 #

1. DialogueButton组件的onClick事件绑定错误
   点击列表Delete按钮后，弹窗刚渲染完成文件就被删除，说明弹窗内的Delete按钮回调在组件渲染时就被执行了。大概率是DialogueButton内部错误地直接执行了回调函数，而非作为点击事件绑定：

   // 错误写法（渲染时立即执行回调）
   <button onClick={onClickFunction()}>...</button>
   
   // 正确写法（仅点击时触发）
   <button onClick={onClickFunction}>...</button>
   

   当弹窗渲染DialogueButton时，onClickFunction()会被立即调用，直接触发删除逻辑，跳过了确认步骤。

2. Props命名混淆
   App.js中你把存储删除函数的deleteButton state传给了FileDeleter的deleteButtonSetter props，这个命名极具误导性——deleteButtonSetter看起来是设置按钮状态的setter，但实际传递的是删除操作函数，这种混淆很容易引发逻辑错误。

修复步骤 #

步骤1：修正DialogueButton的事件绑定 #

确保DialogueButton内部正确绑定点击事件，不要立即执行回调：

// DialogueButton.js 正确实现示例
const DialogueButton = ({ text, isAvailable, onClickFunction }) => {
  return (
    <button 
      disabled={!isAvailable}
      onClick={onClickFunction} // 不要加括号，避免立即执行
    >
      {text}
    </button>
  )
}

如果需要传递额外参数，用箭头函数包裹：

onClick={() => onClickFunction(yourParams)}

步骤2：修正Props命名与传递逻辑 #

重新命名相关props，让语义更清晰，避免混淆：

1. App.js：将传递给FileDeleter的deleteButtonSetter改为onDelete，明确这是删除操作的回调；closeButtonSetter改为closeDialog：

   {isDelete ?
     (
       <DialogueWindow
         elements={
           <FileDeleter
             fileName={deleteFile}
             onDelete={deleteButton} // 明确传递删除函数
             closeDialog={setDelete}
           />
         }
       />
     ) :
     null
   }
   

2. FileDeleter.js：更新props接收与调用逻辑：

   return (
     <div className="button-container">
       <DialogueButton
         text="Delete"
         isAvailable={!!fileName}
         onClickFunction={() => {
           onDelete() // 点击弹窗按钮时才执行删除
         }}
       />
       {/* 关闭弹窗按钮 */}
       <DialogueButton
         text="Cancel"
         onClickFunction={() => closeDialog(false)}
       />
     </div>
   )
   

3. DocumentList.js：建议同步调整props命名，比如deleteButtonSetter改为setDeleteFunction，让逻辑更直观：

   const deleteSetter = () => {
     const deleteFile = () => {
       handleClick(path, fileName)
     }
     setDeleteFunction(deleteFile)
     setDeleteFileName(fileName)
     setShowDeleteDialog(true)
   }
   

额外优化：避免重复创建函数 #

每次deleteSetter执行时都会创建新的deleteFile函数，可通过useCallback优化性能：

import { useCallback } from 'react'

const deleteSetter = useCallback(() => {
  const deleteFile = () => {
    handleClick(path, fileName)
  }
  setDeleteFunction(deleteFile)
  setDeleteFileName(fileName)
  setShowDeleteDialog(true)
}, [path, fileName, handleClick, setDeleteFunction, setDeleteFileName, setShowDeleteDialog])

内容的提问来源于stack exchange，提问作者user30266210