Question

我正在使用Redux来管理全局Dialog组件。我使用Redux操作将children组件传递给Dialog组件。

此代码框内有一个功能示例：https://codesandbox.io/s/suspicious-keldysh-uuolb?file=/src/App.js

打开Dialog并渲染其children没问题，问题是当我尝试传递带有其子级之一的状态时：

const handleOpenDialog = () => {
    dispatch(
      openDialog({
        title: <DialogTitle />,
        content: (
          <DialogContent
            form={form}
            setForm={setForm}
            setSubject={setSubject}
            subject={subject}
          />
        ),
        actions: <DialogActions form={form} />
      })
    );
  };

Dialog可以很好地渲染，但是我无法更新传递给Dialog的道具的状态。调用该函数以打开Dialog的组件是这样的：

export default function ContactSupport() {
  const dispatch = useDispatch();
  const [form, setForm] = useState("");
  const [subject, setSubject] = useState("");

  const handleOpenDialog = () => {
    dispatch(
      openDialog({
        title: <DialogTitle />,
        content: (
          <DialogContent
            form={form}
            setForm={setForm}
            setSubject={setSubject}
            subject={subject}
          />
        ),
        actions: <DialogActions form={form} />
      })
    );
  };

  return (
    <Paper onClick={handleOpenDialog}>
      <Grid container spacing={2}>
        <Grid item xs={12} container justify="center">
          <Typography>Icon</Typography>
        </Grid>
        <Grid item xs={12}>
          <Typography align="center">Contact support</Typography>
        </Grid>
      </Grid>
    </Paper>
  );
}

我的意图是，当我单击该组件时，将使用该组件中的Dialog来渲染state。我需要此组件中的state，因为我也需要在DialogActions组件中访问它，因为此组件将通过操作调用API。

在Firefox中，控制台中显示错误：

警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消useEffect中的所有订阅和异步任务清理功能。

我不确定为什么要卸载此组件，如果它仍显示在Dialog背景中。

感谢您为解决此问题提供的任何帮助，即使采用了另一种设计模式也是如此。

谢谢

Answer 1

当我不想搜索重新渲染的原因时，我使用的一个简单解决方法是在this._mounted=false中定义一个constructor，并将其设置为{{1 }}，然后返回true中的componentDidMount()。

现在您像这样使用false：

componentWillUnmount()

这是类组件的版本，但我希望您知道如何在FC中使用它。

Answer 2

与我的情况相同的任何人，我都可以通过state动作在redux中设置组件state来解决。

通过这种方式，我可以访问整个应用程序，因此不需要通过道具传递状态。缺点是我每次击键都必须重新安装该组件。

我用我使用的解决方案更新了codeandbox。

使用Redux时无法在已卸载的组件上执行React状态更新

2 个答案: