javascript 传递一个props来调用一个函数不起作用

dzjeubhm  于 2023-03-28  发布在  Java
关注(0)|答案(2)|浏览(139)

我有一个取消按钮。我想在另一个js文件中执行一个特定的功能时,按下按钮。这是我正在做的。

function Add(props) {
  const [cancel, setCancel] = useState(false);

  const handleCancel = () => {
    setCancel(true);
    <UploadFile cancel={cancel}/>
  }

  return(
    <div>
      <Dialog open={open} onClose={handleClose}>
         <DialogActions>
            <Button variant="contained" onClick={handleCancel}>Cancel</Button>
         </DialogActions>
      </Dialog>
    </div>
  )
}

在另一个文件UploadFile.js中,代码如下:

const UploadFile = (props) => {
    useEffect(() => {
        if(props.cancel) {
            remove();
        }
    },);

    const remove = () => {
    //Doing removing files
    ...
    };
}

但是remove()从来没有被调用过。我不确定useEffect()是否被正确使用。

wvt8vs2t

wvt8vs2t1#

您正在调用useEffect内部的remove函数,该函数仅在页面加载时呈现一次。这意味着remove函数仅在UploadFile呈现时调用。请尝试将if语句移出useEffect。

eufgjt7s

eufgjt7s2#

你应该把cancel prop作为dependency传入useEffect来触发更新这个useEffect。

const UploadFile = (props) => {
    useEffect(() => {
        if(props.cancel) {
            remove();
        }
    }, [props.cancel]);

    const remove = () => {
    //Doing removing files
    ...
    };
}

注意:不要将组件放在句柄逻辑函数中

相关问题