Question

在此需要理解三个逻辑：

1）有一个调用模态的组件，并将其传递给具有回调属性的子组件（这是调用组件中的React Hook设置函数）

2）模态安装在“ app”文件中，位于调用组件父级的几层。

3）模态知道是可见的，并通过redux（组件调用发送到的对象）接收子代

// component call

import FilterMenu from "./FilterMenu";

const CallingComponent = ({ renderModal, setModalToggle }) => {
  const [rowFilter, setRowFilter] = useState({});

  const handleRenderFilterMenu = () => {
    renderModal({
      children: (
        <FilterMenu
          callback={setRowFilter}
          close={() => setModalToggle(false)}
        />
      )
    });
  };

  return (
    <div>
      <button onClick={handleRenderFilterMenu}>Click Me</button>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    renderModal: boolean => {
      dispatch(renderModal(boolean));
    },
    setModalToggle: boolean => {
      dispatch(setModalToggle(boolean));
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(CallingComponent);


// app (where modal is mounted)

const App = () => (
  <Router>
    <Routing/> // react router where all pages branch from 
    <Modal/>
  </Router>
);


// modal 

const Modal = ({ children, visible }) => {
  return (
    <Root visible={visible}>
      <Box>
        {children}
      </Box>
    </Root>
  );
};


// FilterMenu (modal child component, provided by calling component)

export default ({ callback, close }) => {
  const startingState = getStartingState();

  const [inputMatrix, setInputMatrix] = useState(startingState);

  const handleApply = () => {
    callback(inputMatrix);
    close();
  };

  return (
    <Root>
      ...
      <Button onClick={handleApply}>Apply Filter</Button>
    </Root>
  );
};

此回调在CallingComponent中设置状态时，会出现此错误：

无法在已卸载的组件上执行React状态更新。这是无操作，但表示您的应用程序内存泄漏。修理，取消useEffect清理中的所有订阅和异步任务功能。

该错误的本质是异步函数。您可以在https://github.com/facebook/react/issues/15006

上找到有关它的对话

但是在这里，我只做一个 redux动作调用，并通过redux向组件提供回调。

这在另一个仓库中就已经起作用了。

在我将App组件安装到Redux之前，它也工作了。当我删除那一块时，此错误不再发生。

如何期望我将其清理干净以便被视为已安装？关于为什么将App连接到Redux时会出现此错误的任何想法？

感谢您的时间和精力。

模态组件回调函数上的“无法对已卸载的组件执行React状态更新”

0 个答案: