Reactjs 渲染过程中的反应、重复制、调度操作

我在条件下渲染不同的组件

  render() {

    switch(foo) {
    case 'a': return <A/>
    case 'b': return <B/>
    default: return <C/>
    }
  }

render（）{
开关（foo）{
案例“a”：返回
案例“b”：返回
默认值：返回
}
}

现在，我想跟踪每个屏幕的访问次数，并执行如下操作

render() {

  switch(foo) {
  case 'a':
    this.props.dispatch(analytics.log({"screen": "A"}))
    return <A/>
  case 'b':
    this.props.dispatch(analytics.log({"screen": "B"}))
    return <B/>
  default:
    this.props.dispatch(analytics.log({"screen": "C"}))

    return <C/>

}

render（）{
开关（foo）{
案例“a”：
this.props.dispatch（analytics.log（{“screen”：“A”}））
回来
案例“b”：
this.props.dispatch（analytics.log（{“screen”：“B”}））
回来
违约：
this.props.dispatch（analytics.log（{“screen”：“C”}））
回来
}

我收到一个错误

无法在现有状态转换期间更新（例如在
渲染
中）。渲染方法应该是道具和状态的纯函数。

我无法将日志函数调用移动到
componentDidMount
，因为用户像
tab
那样移动这些屏幕

在这种情况下，
render
是放置日志的最佳位置，但建议我不要这样做

我能做什么？
将分派移动到组件
的
组件didmount
，
和
我假设您不能将此逻辑移动到
组件didmount
，因为它们都在同一时间呈现（您提到的选项卡），然后我会将其移动到切换选项卡的按钮的
onClick
处理程序中。
我会将其包装到每个组件的onClick处理程序中

e、 g:

或者，您可以将分派移动到子组件中，以便在呈现它们时，将动作分派到那里

在：

您不应该通过<代码> Read（）/<代码>调用<代码> Debug >代码>。您可以添加事件处理程序，即调用分派。考虑使用<代码>组件DeNoMultUnt（）/代码>，并使用发送日志的变量。呈现函数返回单个组件，因此它们不会同时呈现。
onClick = ('A'/'B'/'C') => {
    dispatch(analytics.log('A');
    history.push('A') or switch tab to ('A') // however you are handling tab change.
} 

useEffect(() => { // or componentDidMount
 dispatch(analytics.log('A')
}, []) 

 // rest of A component.