Reactjs 组件在分派操作时不断重新呈现（承诺）

当我使用

this.props.addChannel（有效负载）运行代码时
通道组件保持重新渲染，就像它在无限循环中一样

当我用
console.log（有效负载）
替换它时，它工作正常

const mapStateToProps = state => ({
    user: state.shared.user,
});

const mapDispatchToProps = dispatch => ({
    addChannel: (payload) => dispatch({type:ADD_CHANNEL, payload})
});


class Channel extends Component{

    componentDidMount(){
        const payload = api.Channels.getAll();
        this.props.addChannel(payload);
        //console.log("Channels", payload)

    }

    render(){
        return(
            <div>
            <AddChannel />
            <ChannelList channels={[{text:"test"}]} />
            </div>
        );
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Channel);

减速器：

import {ADD_CHANNEL} from '../constants/ActionTypes';

export default (state={}, action={}) => {
   switch(action.type){
      case ADD_CHANNEL:
         return {...state};
      default:
         return {...state};
   }
};

路由组件：

import React,{Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import { connect } from 'react-redux';

import Auth from './containers/Auth';
import Channel from './containers/Channel';
import Messages from './containers/Messages';
import withAuth from './components/Auth/WithAuth';

const mapStateToProps = state => ({
    user: state.shared.user,
});


class Routes extends Component{
  render(){
     const user = this.props.user;

     return (
        <Switch>
            <Route exact path='/' component={Auth} />
            <Route path='/messages' component={withAuth(Messages, user)} />
            <Route exact path='/channels' component={withAuth(Channel, user)} />
        </Switch>
    );
  }
};

export default connect(mapStateToProps, ()=>({}),null,{pure:false})(Routes);

import React，{Component}来自'React'；
从“react router dom”导入{Route，Switch}；
从'react redux'导入{connect}；
从“/containers/Auth”导入身份验证；
从“./containers/Channel”导入频道；
从“./containers/Messages”导入邮件；
从“/components/Auth/withAuth”导入withAuth；
常量mapStateToProps=状态=>({
用户：state.shared.user，
});
类路由扩展组件{
render（）{
const user=this.props.user；
返回(
);
}
};
导出默认连接（mapStateToProps，（）=>（{}），null，{pure:false}）（路由）；
产生循环的原因可能是在
路由的
组件的
道具中使用auth调用了高阶组件
。（见附件）

每次呈现
Routes
时，此调用都将返回一个新组件，该组件将装载一个新的
频道
，并附带一个api调用和redux存储更新。由于
{pure:false}
，存储更新将触发
路由
的重新排序（即使
用户
没有更改），并开始循环的新循环

如果您删除
{pure:false}
（这在这里似乎不太有用），您可能会结束循环，但是
通道
组件仍然会进行不必要的重新装载，如果它的一个祖先重新启动，重置
通道
及以下的所有本地组件状态

要解决此问题，您可以使用auth重构
，将
用户
作为道具而不是参数，并在
路由
类之外的顶层调用它：

const AuthMessages = withAuth(Messages);
const AuthChannel = withAuth(Channel);

现在，您可以使用
Route
的
render
道具将
user
传递给这些组件：

<Route path='/messages' render={(props) => <AuthMessages {...props} user={user}/>}/> 
<Route exact path='/channels' render={(props) => <AuthChannel {...props} user={user}/>}/>

}/>
}/>

除此之外，您可能希望将通道保留在存储中，并异步处理api调用，但我认为这段代码更多的是一项正在进行的工作。
什么是
api.channels.getAll（）
do？调用django rest api并返回承诺。除了通道一
constauth={login：（data）=>requests.post（LoginUrl，data）}之外，身份验证承诺工作正常您没有控制此异步操作。当使用
redux promise
将
有效载荷传递给
this.props.addChannel
Am时，您的
有效载荷
变量可能是
未定义的
。在解析承诺时返回一个值，否则不返回。当控制台记录有效负载时，它也可以正常工作。你能把你的减速机也寄出去吗？
<Route path='/messages' render={(props) => <AuthMessages {...props} user={user}/>}/> 
<Route exact path='/channels' render={(props) => <AuthChannel {...props} user={user}/>}/>