Question

我有一个问题，我想在路由渲染中的组件之前调度我的动作（isLoading），但是当我在onEnter事件中调用dispatch时，React给出了错误：

“警告：setState（...）：在现有状态转换（例如在render或其他组件的构造函数中）期间无法更新。渲染方法应该是props和state的纯函数；构造函数的副作用是反模式，但可以移至componentWillMount。”

我很清楚这个错误是逻辑结果，因为在进行组件渲染时我会在存储中更改数据，因此无法将调度放在componentDidMount中，因为在我在父组件Route（。请帮助我）中获得componentDidMount之前，先进行Route子渲染。需要针对这种情况的好的解决方案。

我的代码： `

const App = ({ location }) => {
  return (
        <div>
          {console.log(this)}
          <TransitionGroup className="transition-group">
            <CSSTransition
                key={location.key}
                timeout={0}
                classNames="fade"
            >
              <section className="route-section">
                <Switch location={location}>
                  <Route path="/" exact component={Index} onEnter= 
                       {store.dispatch(isLoading(true))}/>
                  <Route path="/news" exact component={News}/>
                  <Route path="/projects" exact component={Projects}/>
                  <Route path="/contacts" exact component={Contacts}/>
                  <Route path="/about"  exact component={About}/>
                </Switch>
              </section>
            </CSSTransition>
          </TransitionGroup>
        </div>
  )
};

`

Answer 1

我认为您需要将分派包装在函数中，而不是像这样直接调用它（假设您正在使用ES6语法）：

<div class="joe" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
  Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>

<div class="harry" >
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
  Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
  dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>

此外，请注意，在react-router 4中，不再支持onEnter属性，请参见https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md#on-properties。

路由器分派onEnter

1 个答案: