javascript - react 错误: "Cannot update during an existing state transition"

Question

我正在尝试编写一个使用 toastr 组件的应用程序。但是，当我尝试在此组件中分派(dispatch) redux 操作时，我收到以下控制台消息:

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

您可以在 this codesandbox 中看到这样的示例。特别是，问题出在第 23 行的 toastr.js 组件上。谢谢!

Answer 1

问题正是错误消息所说的:您直接在 render() 方法内部触发一种 React 状态更新:

const Toasts = ({ appointments, resetState, toastedAppointment, toasts }) => {
  if (toasts.type) {
    switch (toasts.type) {
      case "dataFetched":
        resetState(); // Dispatching this action creates the warning.

在本例中，它正在调度 Redux 操作，但这最终会导致 React setState() 调用。

不要这样做:) 副作用逻辑，例如根据当前状态触发某种附加更新，可能应该发生在 componentDidUpdate 之类的情况下。 Toasts 组件可能需要相应地从函数组件转换为类组件。