Javascript 对父组件的异步函数调用

我有这个

const Parent = () => {
    [modalOpen, setModal] = React.useState(false);

    return <Child
               open={modalOpen}
               closeModal={() => setModal(false)}
               functionFromParent={() => console.log('Logged')} />
}

const Parent=（）=>{
[modalOpen，setModal]=React.useState（false）；
返回setModal（false）}
functionFromParent={（）=>console.log（'Logged'）}/>
}

那

const Child = ({ functionFromStore, functionFromParent, closeModal }) => {
    async function foo() {
        try {
          await ...;
          functionFromStore();
          functionFromParent();
        } catch (error) {
          ....
        }
    }

    const bar = () => {
        foo();
        closeModal();
    }

    return <div
           style={{backgroundColor: 'hotpink', width: '10rem', height: '10rem' }}
           onClick={() => bar()}/>
}

const Child=（{functionFromStore，functionFromParent，closeModal}）=>{
异步函数foo（）{
试一试{
等待。。。；
函数fromstore（）；
functionFromParent（）；
}捕获（错误）{
....
}
}
常数条=（）=>{
foo（）；
closeModal（）；
}
返回栏（）}/>
}

组成部分

决定是否显示

（它是模态）。

有三个函数，

closeModal（）

和

functionfrompent（）

，来自

。和

functionFromStore（）

来自

redux

通过

dispatchToProps（）

。为了简单起见，我保留了所有的

connect（stateToProps，dispatchToProps）（…）

内容。但是让我们假设

直接连接到

存储

单击

中的

执行

条（）。这会导致
卸载
，因为
中的
关闭模式（）被调用，关闭模式。但是，
bar（）
也调用
foo（）
，这是一个
异步
函数

解析
wait
时，会调用
functionFromStore（）
，但不会调用
functionfromsparent（）
。我想知道这是为什么？为什么即使组件（
）已卸载，也会调用来自
存储的函数，而不是来自父级的函数

此外，是否有一种方法可以调用
函数fromparient（）
，即使
已卸载？它与
functionFromStore（）
一起工作，有没有办法使它与
functionfromparient（）一起工作？
函数父函数（）{
const[modalOpen，setModal]=React.useState（false）；
返回(
setModal（假）}
functionFromParent={（）=>console.log（“Logged”）}
/>
);
}

是否有方法调用functionFromParent（），即使在卸载时也是如此？不知怎的，它与functionFromStore（）配合使用，有没有办法使它与functionFromParent（）配合使用


是的卸载组件时，可以执行React hooks'
useEffect
提供的清理。您可以看到下面的代码，一旦单击div，就会调用props.closeModal，这将卸载子组件。组件卸载后，
useffect
将执行useffect的
return
块中的清理，该块从父级调用
函数
并从存储区调用
函数


函数子（道具）{
useffect（（）=>{
return（）=>{
props.functionFromStore（）；
props.functionFromParent（）；
};
});
返回(
);
}
我无法重现您描述的行为，但这可能是一个错误，因为您多次设置状态，但在处理程序的闭包中有一个过时的状态值

您可以通过将回调传递给状态设置器来解决此问题：
setSomeState（currentState=>（{…currentState，changes}））
，下面是一个完整的示例：


函数父函数（）{
常量[状态，设置状态]=React.useState({
是的，
秀福：错，
});
返回(
{state.showmodel(
设置状态（状态=>({
……国家，
showModal：错，
}))
}
functionFromParent={（）=>
设置状态（状态=>({
……国家，
秀福：没错，
}))
}
/>
) : (
“孩子走了”
)}
{state.showFoo？：'no foo'}
);
}
函数子级（{functionFromParent，closeModal}）{
函数foo（）{
设置超时（（）=>{
functionFromParent（）；
}, 1000);
}
常数条=（）=>{
foo（）；
closeModal（）；
};
返回点击我；
}
函数Foo（）{
返回“嗨，我是福”；
}
ReactDOM.render(
,
document.getElementById（'root'））
);

必须已调用父函数的
函数。一定是其他原因导致了这个问题


const Parent=（）=>{
const[showChild，setShowChild]=React.useState（true）；
常量childProps={
fnFromParent:（）=>{
log（“从fnFromParent记录”）；
},
卸载：（）=>{
setShowChild（假）；
}
};
返回(
我是父母

{showChild&&
}
);
};
常量子项=（{fnFromParent，unmount}）=>{
常数延迟=（）=>{
const p=新承诺（res=>setTimeout（res，3000））
p、 然后（（）=>fnFromParent（））；
};
常量clickHandler=（）=>{
延迟（）；
卸载（）；
};
return
我是个孩子（单击以删除我）
；
};
render（，document.getElementById（“根”））

函数组件中的这个.props
？@marzelin感谢您指出这一点。我更正了。
是否有方法调用functionFromParent（），即使在卸载时也是如此？
是的，无需更改任何内容。我添加了一个答案，表明您的代码已经工作。如果没有，那是因为你没有在你的问题中发布一些东西。您可以发布演示问题的代码吗？functionFromStore是否可能导致错误，并且因为它是异步函数，所以会导致拒绝承诺。Chrome控制台可以告诉你是否有一个未捕获的承诺，或者可能会在catch中记录一些内容？@HMR-Nope，没有错误。我还可以将
函数FromParent（）
移动到
错误{…}
块，同样的行为