React传递Props调用函数失效，remove()未执行求助

你的代码存在两个关键问题导致remove()不执行：

1. 错误的组件渲染方式 #

在handleCancel事件函数里直接写<UploadFile cancel={cancel}/>是无效的——React组件只能在组件的**渲染输出区域（return的JSX结构中）**被正确挂载和管理，事件函数中创建的组件实例不会被渲染到DOM，自然也不会触发其内部的useEffect。

2. useEffect依赖数组缺失 #

UploadFile中的useEffect依赖数组为空，这意味着它只会在组件挂载时执行一次。当props.cancel状态变化时，useEffect不会重新运行，也就无法检测到cancel变为true的状态。

修正后的代码 #

1. Add组件（父组件） #

把UploadFile组件移到渲染区域，通过状态cancel控制其props：

import { useState } from 'react';
import UploadFile from './UploadFile';

function Add(props) {
  const [cancel, setCancel] = useState(false);
  // 假设open和handleClose是已定义的变量
  const [open, setOpen] = useState(true);
  const handleClose = () => setOpen(false);

  const handleCancel = () => {
    setCancel(true);
  };

  // 可选：接收子组件的回调，重置cancel状态以便下次使用
  const resetCancel = () => {
    setCancel(false);
  };

  return(
    <div>
      <Dialog open={open} onClose={handleClose}>
         <DialogActions>
            <Button variant="contained" onClick={handleCancel}>Cancel</Button>
         </DialogActions>
      </Dialog>
      {/* 将UploadFile放在渲染区域，传递cancel状态和重置回调 */}
      <UploadFile cancel={cancel} onCancelComplete={resetCancel}/>
    </div>
  )
}

2. UploadFile组件（子组件） #

为useEffect添加props.cancel依赖，确保状态变化时触发逻辑：

import { useEffect } from 'react';

const UploadFile = (props) => {
    useEffect(() => {
        if(props.cancel) {
            remove();
            // 执行删除后通知父组件重置状态（可选）
            props.onCancelComplete?.();
        }
    }, [props.cancel]); // 必须添加props.cancel到依赖数组

    const remove = () => {
        // 执行删除文件的逻辑
        console.log('正在删除文件...');
        // 你的删除代码
    };

    // 组件的其他渲染内容（根据实际需求补充）
    return <div>上传文件组件</div>;
}

export default UploadFile;

额外说明 #

如果UploadFile不需要常驻在页面中，你也可以通过回调函数的方式直接传递删除逻辑：

• 在UploadFile中导出remove函数，或者将remove作为props传递给父组件，点击Cancel时直接调用。不过这种方式需要注意组件实例的获取（比如使用useRef），相比状态驱动的方式更复杂，推荐优先使用上述状态驱动的方案。

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