我有这个
const Parent = () => {
[modalOpen, setModal] = React.useState(false);
return <Child
open={modalOpen}
closeModal={() => 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()}/>
}
零件。
<Parent />决定是否显示<Child />（它是Modal）。<Child />具有三个功能，closeModal()并且functionFromParent()来自<Parent/ >。而functionFromStore()从未来redux过dispatchToProps()。为了简单起见，我忽略了所有connect(stateToProps, dispatchToProps)(...)内容。但让我们假设<Child />直接连接到store。
单击<div />in<Child/>执行bar()。这导致<Child />到unmount，因为closeModal()在<Parent />被调用时，关闭模式。然而，bar()还呼吁foo()，作为一个async功能。
当await解决了，functionFromStore()是所谓的，但不是functionFromParent()。我不知道为什么呢？store即使<Child />卸载了组件（），为什么函数仍来自被调用函数，而不是来自父函数？
此外，functionFromParent()即使在<Child />未挂载的情况下，有没有办法打电话？它以某种方式起作用functionFromStore()，是否有办法使其起作用functionFromParent()？
我无法重现您描述的行为，但这可能是一个关闭问题，因为您多次设置状态，但是在处理程序的关闭中有一个过时的状态值
您可以通过将回调传递给state setter：来解决它setSomeState(currentState=>({...currentState,changes}))，这是一个完整的示例：
function Parent() {
const [state, setState] = React.useState({
showModal: true,
showFoo: false,
});
return (
<div>
{state.showModal ? (
<Child
open={state.showModal}
closeModal={() =>
setState(state => ({
...state,
showModal: false,
}))
}
functionFromParent={() =>
setState(state => ({
...state,
showFoo: true,
}))
}
/>
) : (
'Child is gone '
)}
{state.showFoo ? <Foo /> : 'no foo'}
</div>
);
}
function Child({ functionFromParent, closeModal }) {
function foo() {
setTimeout(() => {
functionFromParent();
}, 1000);
}
const bar = () => {
foo();
closeModal();
};
return <button onClick={bar}>click me</button>;
}
function Foo() {
return 'hi, I am Foo';
}
ReactDOM.render(
<Parent />,
document.getElementById('root')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句