在React Select中的事件处理程序中失败`dispatch`

Question

我正在实现一个create-react-app应用程序，并同时尝试使用钩子和上下文。

我的Steps组件如下：

const Steps = () => {
  const { contactUsFormState, contactUsFormDispatch } = useContext(
    FormsContext
  );

  const selectHandler = ({ nextValue }) => {
    console.log(nextValue);
    if (nextValue !== '0') {
      console.log('disapthc VALID');
      contactUsFormDispatch({
        type: 'SET_STEP_FINISHED',
        finishedStep: 1
      });
    }
    else if(nextValue === "0") {
      console.log('disapthc INVALID')
      contactUsFormDispatch({
        type : "INVALIDATE_STEP",
      })
    }
  };

  return (
    <Form>
      {(function() {
        switch (contactUsFormState.activeStep) {
          case 1:
            return (
              <Select
                name="select issue"
                label="Please select topic"
                onChange={selectHandler}
              >
                <option value={0}>- - - - - - - - - - - -</option>
                <option value="Get help with your personal life">
                  Get help with your personal life
                </option>
                <option value="Order cookies">
                  Order a cartoon of cookies
                </option>
                <option value="Report strange feelings">
                  Report strange feelings
                </option>
                <option value="Clarify usage of our API">
                  Clarify usage of our API
                </option>
              </Select>
            );

          default:
            return <p>DEBUG ME</p>;
        }
      })()}
    </Form>
  );
};

当我将Select组件更改为触发dispatch时，它没有变化并且反应显示警告：

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

当我从变更处理程序中删除所有dispatch个调用时，一切正常。

如何解决此问题？