从IonModal更新首页组件状态触发useEffect报错及视图不更新问题

1. 「无法对已卸载组件执行状态更新」警告修复 #

原因：你的addData方法定义在IonModal组件内部，执行dispatch(addTransaction(transaction))时会触发Redux状态更新，若该更新同时触发了上层组件重渲染，会导致IonModal提前进入卸载流程，后续执行setShowModal(false)时组件已经卸载，就会抛出该警告。
解决方法：用useRef标记组件挂载状态，更新状态前先判断组件是否仍挂载：

// IonModal组件内添加
const isMounted = useRef(true);
useEffect(() => {
  return () => {
    isMounted.current = false;
  };
}, []);

// 修改addData方法
const addData = async () => {
  const transaction = await createTransaction(data);
  dispatch(addTransaction(transaction));
  if (isMounted.current) {
    setShowModal(false);
  }
};

2. Redux状态更新后首页不渲染修复 #

问题原因 #

你遇到的渲染失效问题90%以上是Redux状态更新时未遵循不可变原则，导致useSelector浅比较检测不到状态变化，不会触发组件重渲染；其次是多余的内部状态同步逻辑引入了额外bug。

解决步骤 #

• 第一步：删除首页冗余的内部状态同步逻辑，直接使用useSelector返回的状态渲染，避免多一层同步带来的问题：

// 直接用该变量渲染列表，不需要额外用useState存储
const transactions = useSelector(state => state.transactions);

• 第二步：检查Redux reducer的更新逻辑是否符合不可变要求：
  • 若使用原生Redux：必须返回全新的数组对象，禁止直接修改原状态：

  // 正确写法
  const transactionReducer = (state = initialState, action) => {
    switch (action.type) {
      case 'addTransaction':
        return {
          ...state,
          transactions: [...state.transactions, action.payload]
        };
      default:
        return state;
    }
  };
  

  • 若使用Redux Toolkit：确认更新逻辑写在createSlice的reducers配置中，没有手动返回旧状态引用。
• 第三步（排查用）：若还是不触发更新，可给useSelector添加浅比较参数验证：

import { shallowEqual } from 'react-redux';
const transactions = useSelector(state => state.transactions, shallowEqual);

内容的提问来源于stack exchange，提问作者Josh Richards