时间戳

首页 > 解决方案 > 从 IonModal 更新主页组件的状态得到 useEffect 错误

reactjs - 从 IonModal 更新主页组件的状态得到 useEffect 错误

问题描述

我有一个 IonModal，我用它通过 API 调用将数据添加到我的数据库中。然后，我会将响应数据添加到我的 Redux 存储中的列表中，该列表显示在主页上。

在我的模态中按下按钮调用此函数以调用 API、获取响应、将其添加到商店并关闭模态：

const addData = async () => {
  const transaction = await createTransaction(data);
  dispatch(addTransaction(transaction));
  setShowModal(false);
};

createTransaction 正在调用 API 并返回响应数据。

当它被调用并且模式关闭时，我收到此错误

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要解决此问题，请在 useEffect 清理函数中取消所有订阅和异步任务。

在我的主页中，我只有一个简单的 useEffect ，它将组件内的状态设置为 redux 存储内的状态，并且应该更新组件内显示的内容，但不是：

const transactions = useSelector(state => state.transactions);
const [data, setData] = useState([]);

useEffect(() => {
  setData(transactions);
}, [transactions]);

数据确实成功地添加到了 Redux Store，但它只是没有在主页上直观地更新。

任何帮助或建议将不胜感激。

标签： reactjsionic-frameworkreduxuse-effect

解决方案

尝试将数据添加到 useEffect 数组，如下所示useEffect(() => {}, [transactions, data])：本质上，useEffect 钩子所做的就是在每次感知到状态变量的变化时重新渲染。所以你的数据状态变量正在更新；但是，它没有在视觉上更新，因为它没有被告知要重新呈现数据更改。

推荐阅读