Jakub Kohout Jakub Kohout - 4 months ago 58
Javascript Question

ComponentwillMount is called twice

I'm my

componentWillMount()
is called everytime I switch routes.

Is there other way how to handle changes in store's state?

When I use the two functions for the first time it's ok but, when I switch routes and go back and try to use them again I get this message

warning.js:45 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.


InventoryList.js

import React from "react";
import InventoryItem from "../components/InventoryItem";
import InventoryItemStore from "../stores/InventoryItemStore";
import { Link } from "react-router";

export default class InventoryList extends React.Component {
constructor() {
super();
this.state = {
items: InventoryItemStore.getAll(),
}
}

componentWillMount() {
InventoryItemStore.on("change", () => {
this.setState({
items: InventoryItemStore.getAll()
});
});
}

render(...);
}


InventoryStore.js

import { EventEmitter } from "events";

import dispatcher from "../dispatcher";

class InventoryItemStore extends EventEmitter {

constructor() {
super()
this.items = [
{
id: 1,
title: "first item",
stockQuantity: 10
},
{
id: 2,
title: "second item",
stockQuantity: 5
}
];
}

getAll() {
return this.items;
}

// Adds new item to the inventory store
addItem( title, stockQuantity ) {
const id = Date.now();
this.items.push({
id,
title, // We don't have to do title: title because of ES6... Thx ES6
stockQuantity
});

this.emit("change");
}


/**
* Lower the stock quantity of certain item
* @param {integer} id
* @param {integer} stockQuantity
*/
lowerQuantity( id, orderQuantity ) {

this.items.map((item) => {

if ( item.id == id ) {
item.stockQuantity = item.stockQuantity - orderQuantity;
}

});

this.emit("change");

}


handleActions( action ) {

switch( action.type ) {
case "ADD_ITEM": {
const { title, stockQuantity } = action;
this.addItem( title, stockQuantity );
}
case "LOWER_QUANTITY": {
const { id, orderQuantity } = action;
this.lowerQuantity( id, orderQuantity );
}
}

}

}

const inventoryItemStore = new InventoryItemStore;

dispatcher.register(inventoryItemStore.handleActions.bind(inventoryItemStore));

export default inventoryItemStore;

Answer

Your component will get unmounted every time you change route, and a new one will be mounted when you change back.

Since you're registering a eventhandler with InventoryItemStore.on but never unregistering it you're left with two components listening to change and the one that isn't mounted throws the error.

Use componentWillUnmount to un-register your component so it doesn't hang around like a ghost and haunt you when you navigate back.

See React lifecycle for more life-cycle hooks.