应用 redux-persist 后，react-hook-form onSubmit 不起作用

Question

我正在使用 react-hook-form 和 redux 制作向导表单。 现在我正在尝试应用 redux-persist 以在刷新或单击 go 后保留表单的值。

但是在我设置 redux-toolkit 后，handleSubmit 不起作用。 控制台没有错误，所以我想知道是什么问题。

这是我的代码。

store.js

import { configureStore } from '@reduxjs/toolkit';
import { formReducer } from './features/formSlice';
import storageSession from 'redux-persist/lib/storage/session';
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';

const persistConfig = {
  key: 'root',
  storage: storageSession,
};

const persistedReducer = persistReducer(persistConfig, formReducer);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== 'production',
  middleware: [thunk],
});

export const persistor = persistStore(store);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './i18n';
import { store, persistor } from './store';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root'),
);

programName.js（我的向导表单中的第 1 步）

function ProgramName() {
  const programName = useSelector((state) => state.programName);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    defaultValues: programName,
  });

  const dispatch = useDispatch();
  const history = useHistory();

  const handleOnSubmit = (data) => {
    console.log(Object.values(data));
    dispatch(submitStep1(Object.values(data)));
    history.push('./step2');
  };

  return (
    <form onSubmit={handleSubmit(handleOnSubmit)}>
      <Text size={30} weight={800} mb={10}>
        Step 1. Program name
      </Text>
      <label htmlFor="programName">
        Program Name
        <input
          name="programName"
          {...register('programName', { required: 'fill out!' })}
        />
        <ErrorMessage errors={errors} name="programName" as="p" />
      </label>
      <Button type="submit">next</Button>
    </form>
  );
}

export default ProgramName;

更详细的例子

当我单击下一步时，handleSubmit 不起作用，尽管我填写了输入，但错误消息仍显示在下方，因此我无法进入第 2 步表单。