javascript - 对父组件的异步函数调用

Question

我有这个

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 />在 <Child/>执行 bar() .这导致 <Child />至 unmount ，因为 closeModal()在<Parent />被调用，关闭模态。然而，bar()也叫 foo() , 作为 async功能。

当 await已解决，functionFromStore()被调用，但不是 functionFromParent() .我想知道这是为什么？为什么函数来自 store调用，即使组件 ( <Child />) 已卸载，但不是来自父级的函数？

另外，有没有办法调用functionFromParent() ，即使 <Child />已卸载？它以某种方式与 functionFromStore() 一起使用, 有没有办法让它与 functionFromParent() 一起工作？

Answer 1

我无法重现您描述的行为，但它可能是 closure problem因为您多次设置状态，但在处理程序的关闭中有一个陈旧的状态值

您可以通过将回调传递给状态 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>