切换语言控制台报错
来源：8-8 【redux重构】action 的拆分与统一
慕粉4283821
2021-03-17
老师，按照你的代码去写之后
切换语言时， 功能没有问题。但是控制台有报错。如下：
这是什么原因呀。
看意思是不能在组件构造函数中使用 setState 但是实际上，只有下面这个地方可能报错
// Header.class.tsx文件
constructor(props) {
super(props);
const storeState = store.getState();
this.state = {
language: storeState.language,
languageList: storeState.languageList,
};
store.subscribe(() => {
const storeState = store.getState();
// 这里用了 setState， 但是是在回调内，也不是在构造函数中执行了
this.setState({
language: storeState.language,
languageList: storeState.languageList,
});
});
}
写回答
1回答
-
这个问题是我忽视了。不过首先要注意的是，这是个warning（警告）不是error（错误），这是就是为什么网站可以正常运行，语言操作也能正常进行。
不过这个问题确实值得我们注意，warning告诉我们在组件还没加载进来的时候不可以调用setState，那么在代码中，我们的确在store.subcribe的callback中调用了setState，而store.subcribe又是在constructor中调用的。
还记得第三章、第四章的内容吗？组件加载的顺序是constructor -> componentDidMount -> componentWillunMount。问题就是constructor调用的时候组件根本还没加载进来，所以出现了warning。不过幸运的是我们的setState实际上是跑在store.subcribe中的callback中，正是因为callback延缓了组件加载的时机，所以尽管有warning，但网站确没有出问题。
那么我们应该怎么修复这个问题呢？我们可以把store.subcribe放在componentDidMount中就可以解决问题了。
012021-03-19
相似问题