Reactjs react router dom中的history.push()和react redux中的connect()出现了奇怪的意外行为

Reactjs react router dom中的history.push()和react redux中的connect()出现了奇怪的意外行为,reactjs,react-redux,react-router,react-router-dom,Reactjs,React Redux,React Router,React Router Dom,进展如何大家:) 在实际组件安装之前或Redux存储状态通过在reducer中返回新的普通对象而改变之后,似乎调用了作为第一个参数传递给connect函数的MapStateTops函数 然而,我发现react router dom和react redux包之间存在一些奇怪的行为(可能我不知道如何使用它们)。我所面临的问题如前所述,Push与您当前使用的历史记录路径相同。Push()只呈现传递给connect()的实际组件。未确定是否应从mapStateToProps重新渲染组件 这是我在这个项目

进展如何大家:)

在实际组件安装之前或Redux存储状态通过在reducer中返回新的普通对象而改变之后,似乎调用了作为第一个参数传递给connect函数的MapStateTops函数

然而,我发现react router dom和react redux包之间存在一些奇怪的行为(可能我不知道如何使用它们)。我所面临的问题如前所述,Push与您当前使用的历史记录路径相同。Push()只呈现传递给connect()的实际组件。未确定是否应从mapStateToProps重新渲染组件

这是我在这个项目中使用的软件包版本

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
这是密码

 class SomeComponent extends React.Component{
     .
     .
     .
     .

     test = () => {
       //this.props.test();
       //Let's say you are currently in localhost:3000/
       this.props.history.push('/');
     };

     render() {
       console.log('[SomeComponent] is rendered');

       <button onClick={this.test}>test</button>
     }

 }

 const mapStateToProps = (state) => {
   console.log('mapStateToProps is called in [SomeComponent]');

   return {
     someValue: state.someValue
   };
};

const mapDispatchToProps = (dispatch) => {
  return {
    test: () => dispatch({ type: 'test' }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent);
类SomeComponent扩展React.Component{
.
.
.
.
测试=()=>{
//this.props.test();
//假设您当前在localhost:3000中/
this.props.history.push('/');
};
render(){
log(“[SomeComponent]已呈现”);
测试
}
}
常量mapStateToProps=(状态)=>{
log('MapStateTops在[SomeComponent]中被调用');
返回{
someValue:state.someValue
};
};
const mapDispatchToProps=(调度)=>{
返回{
test:()=>dispatch({type:'test'}),
};
};
导出默认连接(MapStateTrops、mapDispatchToProps)(SomeComponent);
我知道,当调用上面注释的这个.props.test()和动作分派,而不是test方法中的这个.props.history.push(“/”)时,一个reducer函数接受这个流,并且与action.type.test不匹配,所以它返回与前面相同的引用对象。因此,用于订阅Redux存储更改的mapStateToProps函数不会被触发

我整天都在试图理解和搜索这种行为,但很难找到我想要的答案

如果你们能帮我解决这个问题或者我的知识贫乏,我会非常感激

谢谢:)很抱歉我的英语不好:(

history.push(“/”)基本上只是在浏览器历史记录中添加了一个条目。如果您在同一个页面上,那么该页面实际上不会重新加载,您的组件也不会重新安装。谢谢您的评论:)但是每次单击按钮,我都会看到日志上写着“[SomeComponent]这意味着该组件是由某个父组件或实际导入connect结果的组件(mapStateToProps,mapDispatchToProps)(SomeComponent)重新渲染的,因此我认为重新渲染周期应该通过MapStateTops来确定实际组件是否应重新渲染。但我没有看到日志上写着“MapStateTops在[SomeComponent]中被调用”。