我每次切换路线时都会调用componentWillMount()
。
还有其他方法可以处理商店状态的变化吗?
当我第一次使用这两个功能时它还可以,但是,当我切换路线并返回并尝试再次使用它时,我收到此消息
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;
答案 0 :(得分:2)
每次更改路线时,您的组件都会被卸载,更换后会挂载一个新组件。
由于您正在使用InventoryItemStore.on
注册一个事件处理程序,但从未取消注册它,因此您将看到两个组件正在侦听change
而未安装的组件会引发错误。
使用componentWillUnmount
取消注册您的组件,使其不会像鬼一样徘徊,并在您导航回来时困扰您。
有关更多生命周期挂钩,请参阅React lifecycle。