Updating the state of the Home Page component from a IonModal getting a useEffect error

Ionic Framework Ionic React
1

I have an IonModal that I’m using to add data to my database through an API call. I will then add the response data to a list in my Redux store which is being displayed on the Home Page.

This function is being called on a button press within my modal to call the API, get the response, add it to the store, and close the modal:

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

createTransaction is calling the API and returning the response data.

When it is called and the modal is closed I am getting this error

Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

In my Home page all I have is a simple useEffect that sets the state within the component to the state within the redux store and should update displayed content within the component but isn’t:

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

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

The data does get successfully added to the Redux Store but it just doesn’t get updated visually on the home page.

Any help or advice would be very much appreciated.

2

need to see more code… where is the modal component? where is the call to addData being done?

3

Here is some react code to replicate it

Although the error message goes away with this the state still isn’t being updated on the home page. I suspect it has something to do with the component not being loaded when the state changes but then I don’t know how I would make it update.

To replicate just create a basic ionic app, add in these files, install the missing packages (axios, redux, react-redux), wrap the App in index.ts in a redux Provider, and you should be good.

Home Page

export default function Home(): ReactElement {
  const quotes = useSelector((state: any) => state.quotes);
  const [data, setData] = useState([]);

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

  return (
    <IonPage>
      <IonContent fullscreen>
        <Modal />
        {data.map((q: any) => {
          return <p key={q?._id}>{q?.content}</p>;
        })}
      </IonContent>
    </IonPage>
  );
}

Modal

export default function Modal(): ReactElement {
  const [showModal, setShowModal] = useState(false);
  const dispatch = useDispatch();

  const getData = async () => {
    const quote = await axios.get("https://api.quotable.io/random");
    dispatch(addQuote(quote.data));
    setShowModal(false);
  };

  return (
    <>
      <IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
      <IonModal isOpen={showModal} onDidDismiss={() => setShowModal(false)}>
        <IonButton onClick={() => getData()}>Get Data</IonButton>
      </IonModal>
    </>
  );
}

Redux

export const initialState = [];

export const quotesReducer = (state: any[] = initialState, action: any) => {
  switch (action.type) {
    case "ADD_QUOTE": {
      state.push(action.payload);
      const temp = state;
      return temp;
    }
    default:
      return state;
  }
};

export const addQuote = (quote: string) => {
  return { type: "ADD_QUOTE", payload: quote };
};


const reducer = combineReducers({
  quotes: quotesReducer,
});

export const store = createStore(reducer);

Cheers!