Reactjs 组件在react redux应用程序中意外卸载

下面是我的应用程序index.js文件：

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
从“/App.js”导入应用程序；
从'redux'导入{createStore，combinereducer}；
从'react redux'导入{Provider}；
从'redux'导入{applyMiddleware}；
从“redux记录器”导入记录器；
const state=（state={num:0}，action）=>{
开关（动作类型）{
“变更”案例：
返回{…状态，num:2}；
违约：
返回{…状态}；
}
};
conststore=createStore（组合减速机（{state:state}），applyMiddleware（记录器））；
ReactDOM.render(
,
document.getElementById（'root'），
);

下面是App.js：

从“React”导入React；
从“react router dom”导入{Redirect，Route，Switch，withRouter}；
从'react redux'导入{connect}；
从“/A”导入A；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
changeNum=（）=>{
this.props.dispatch（{type:'CHANGE'}）；
};
render（）{
返回(
} />
);
}
}
常量mapStateToProps=（state）=>（{num:state.state.num}）；
使用路由器导出默认值（connect（mapstatetops）（App））；

下面是A.js：

从“React”导入React；
从'react redux'导入{connect}；
类扩展了React.Component{
componentDidMount（）{
this.props.changeNum（）；
}
组件将卸载（）{
log（'A component unmounted'）；
}
render（）{
返回组件A；
}
}
导出默认值A；

问题是，在点击“/”路由时，我会看到消息

A component unmounted

和两个连续的

CHANGE

操作，而不是控制台中的一个操作，这是意外的

我在早期的项目中也看到过这样的问题，但我一直忽略了。我想找出问题的根源，就在这里

请给我解释一下这种意想不到的行为

---

谢谢大家!

在

Route

中渲染组件时使用的语法在这里是错误的。如果您想将一些附加道具与

路线

道具一起传递给组件，则应使用

渲染

而不是

组件

 <Switch>
          <Route exact path="/" render={(props) => <A {...props} changeNum={this.changeNum} />} />
 </Switch>

} />

谢谢，它正在工作。但是为什么我的版本会产生这个问题呢？能否请您解释一下，您试图将组件作为函数呈现。但是如果你看到路线的建造方式。组件道具不应是函数。看这一行。如果它是一个组件，那么他们将从中执行React.createElement。这在您的情况下不起作用，因为React.createElement的第一个参数必须是组件。但你的答案是一个函数。