Reactjs 在单击当前链接页面后，有太多重新呈现

我使用redux，代码工作正常，但在单击当前页面链接后出现问题，我得到错误

Too many re-renders. React limits the number of renders to prevent an infinite loop.

我试图解决这个问题，但我不知道为什么调度函数在任何操作响应之后执行， 如果链接等于当前页面，如何停止渲染或阻止重定向

减速器

常量initState={ isFetching:false， isSuccess:false， } const tableReducer=state=initState，action=>{ 开关动作类型{ 案例获取内容待定：{ 返回{…状态，isFetching:false，isSuccess:false，} 打破 } 案例获取内容被拒绝：{ 返回{…状态，错误：action.payload，isFetching:false，isSuccess:false，} 打破 } 案例获得恢复剂满足：{ 返回{ 状态 是的， isSuccess:对， moreRestaurents:action.payload.moreRestaurents， restaurent:action.payload.details } 打破 } 案例完成情况：{ return{…state，isFetching:true，issaccess:true，cities:action.payload.cities} 打破 } 由城市完成的案例恢复组：{ 返回{ 状态 是的， isSuccess:对， RestaurantGroupedBySity:action.payload.RestaurantGroupedBySity } 打破 } 案例得到城市恢复者的履行：{ 返回{ 状态 是的， isSuccess:对， 城市资源：action.payload.cityRestaurents， 城市：action.payload.city } 打破 } 案例得到最充分的满足：{ 返回{ 状态 是的， isSuccess:对， MOSTReservedRestarements:action.payload.MOSTReservedRestarements } 打破 } 案例获得顶级恢复者满足：{ 返回{…状态，isFetching:true，isSuccess:true，topRestaurents:action.payload.topRestaurents} 打破 } 案例得到所有恢复者的履行：{ 返回{…状态，isFetching:true，isSuccess:true，allRestaurents:action.payload.allRestaurents} 打破 } 案例获取内容完成：{ 返回{ 状态 isSuccess:对， 是的， 内容：action.payload.content， 页面：action.payload.page } 打破 } } 返回状态； } 导出默认的tableReducer； 主分量

导出类Home扩展组件{ 渲染{ var cities=this.props.homeState.cities； var content=this.props.homeState.content； var isSuccess=this.props.homeState.isSuccess； var isFetching=this.props.homeState.isFetching； var page=this.props.homeState.page==/home； var restaurantsGroupedBySity=this.props.homeState.restaurantsGroupedBySity； 如果是获取和发布访问和城市内容和餐厅按城市分组和页面（&I）{ var cities=this.props.homeState.cities； var content=this.props.homeState.content； var isSuccess=this.props.homeState.isSuccess； var isFetching=this.props.homeState.isFetching； var page=this.props.homeState.page==/home； var restaurantsGroupedBySity=this.props.homeState.restaurantsGroupedBySity； 如果是获取和发布访问和城市内容和餐厅按城市分组和页面（&I）{ 回来 }否则{ 回来 } } } } 常量mapStateToProps=状态=>{ 返回{ 家乡：州 } } const mapDispatchToProps=调度，ownProps=>{ 返回{ getCities:getCitiesdispatch， pageContent:pageContentdispatch，ownProps.match.path， GetRestaurantGroupedByCity:GetRestaurantGroupedByCity Dispatch }; } 导出默认的ConnectMapStateTrops、mapDispatchToPropsHome 行动

---

我在代码中看到两个问题

第一个是主组件中的语法错误：

// ... 如果是获取和发布访问和城市内容和餐厅按城市分组和页面（&I）{ //这是语法错误，您是否正确复制了代码？ 回来 }否则{ // ... 第二个是mapDispatchToProps，为什么你没有这么做。我看不到你的动作创建者，但通常应该是这样的：

const mapDispatchToProps=调度，ownProps=>{ 返回{ getCities:/*操作创建者参数（如果有）*/=> dispatchgetCities/*操作创建者参数，如果有*/， pageContent:/*操作创建者参数，如果有*/=> dispatchpageContent/*操作创建者参数，如果有*/， GetRestaurantGroupedByCity:/*操作创建者参数（如果有）*/=> dispatchgetRestaurantsGroupedByCity/*操作创建者参数，如果有*/， }; } 或者最好不要使用mapDispatchToProps，只需输入：

导出默认连接 MapStateTops， {getCities，pageContent，getRestaurantsGroupedByCity} 家 添加操作创建者的源代码后编辑：

当您使用异步动作生成器时，应该将redux thunk或redux saga添加到redux配置中，但thunk对于初学者来说更简单。 然后，您应该以这种方式重写动作创建者，请参见以下详细信息：

从“axios”导入axios； 导出常量getCities==> 分派=>{ 让citiesQuery='/api/get/cities'； axios.all[ axios.getcitiesQuery ].thenaxios.spreadscities=>{ 返回分派{type:GET\u CITIES\u completed，有效负载：{CITIES:CITIES.data} }.catcherr=>{ 返回分派{type:GET\u CONTENT\u REJECTED，payload:err} }; 返回分派{type:GET_CONTENT_PENDING} } 导出常量getRestaurantsGroupedByCity==> 分派=>{ let RestaurantQuery='/api/get/restaurants group by city'； axios.all[ axios.getrestaurantsQuery， ].thenaxios.spreadresponse=>{ 退货{ 类型：按城市获取恢复组， 有效负载：{restaurantsGroupedBySity:response.data} } }.catcherr=>{ 返回分派{type:GET\u CONTENT\u REJECTED，payload:err} }; 返回分派{type:GET_CONTENT_PENDING} } 可读性改进：

尝试使用对象分解，您的代码将更具可读性和更短

主页面部分

这：

var cities=this.props.homeState.cities； var content=this.props.homeState.content； var isSuccess=this.props.homeState.isSuccess； var isFetching=this.props.homeState.isFetching； var page=this.props.homeState.page==/home； var restaurantsGroupedBySity=this.props.homeState.restaurantsGroupedBySity； 如果是获取和发布访问和城市内容和餐厅按城市分组和页面（&I）{ var cities=this.props.homeState.cities； var content=this.props.homeState.content； var isSuccess=this.props.homeState.isSuccess； var isFetching=this.props.homeState.isFetching； var page=this.props.homeState.page==/home； var restaurantsGroupedBySity=this.props.homeState.restaurantsGroupedBySity； 可以这样写：

const{homeState}=this.props； const{cities，content，issaccess，isFetching，page，restaurantsGroupedBySity}=家乡； const isPage=page==/home；//我建议在这里使用“==”运算符 如果isFetching&&isSuccess&&cities&&content&&RestaurantGroupedByCity&&isPage{ //您不应该在这里再次声明相同的变量， //整个this.props在整个组件中是只读的，不会更改 //如果是这样的话，某个地方就有错误

---

你能分享你的getCities、pageContent和getRestaurantsGroupedByCity操作吗？最可能出现此错误的是当使用错误的赋值将函数绑定到元素时。例如，错误：是的，我在加载组件时收费。将此函数分派到props ConnectMapStateTrops，mapDispatchToProps我不能使用onChange，因为我需要o获取加载页面中的数据谢谢，我将对此进行测试，是的，我正确复制了我的代码，但我没有将html页面复制到主页中，因为它太长`如果正在获取和发布访问和城市和内容和餐厅GroupedByCity和页面{返回html页面主页}`我更新我的问题以查看我的操作文件，我在axios return中发送操作，当我在组件中发送操作时，我在axios响应返回时不会得到更新，因为他需要一些时间。我编辑了我的回答，请参阅有关操作创建者的详细信息，我写道。我可以问一下，您如何调用映射的操作创建者？他们没有被调用您发送的主组件代码。我在axios响应中调度操作，当操作调度Reducer更新状态时，我在globale app const store=createStoretableReducer；ReactDOM.render，document.getElementById'tableApp'中连接Reducer；是的，但您需要在组件中的某个位置调用映射的操作创建者。您已将其映射到props，所以在组件中的某个地方，您应该将其命名为this.props.getCities。请参见此处的“映射动作创建者this.props.addTodo”在addTodo组件中的调用方式。

import axios from 'axios';

export  const getCities =(dispatch)=> {
        let citiesQuery = '/api/get/cities';
        axios.all([
            axios.get(citiesQuery)
        ]).then(axios.spread((cities) => {
            return dispatch({ type: "GET_CITIES_FULFILLED", payload: { cities: cities.data}})
        })).catch (err => {
            return dispatch({ type: "GET_CONTENT_REJECTED", payload: err })
        }); 

        return dispatch({ type: "GET_CONTENT_PENDING"})
}
export const getRestaurantsGroupedByCity =(dispatch)=> {
        let restaurantsQuery = '/api/get/restaurants-group-by-city';
        axios.all([
            axios.get(restaurantsQuery),
        ]).then(axios.spread((response) => {
            return dispatch({ type: "GET_RESTO_GROUP_BY_CITY_FULFILLED", payload: { restaurantsGroupedBySity: response.data}})
        })).catch (err => {
            return dispatch({ type: "GET_CONTENT_REJECTED", payload: err })
        }); 

        return dispatch({ type: "GET_CONTENT_PENDING"})
}