历史记录和状态重置

Question

使用props.history.push步骤表单使我的状态弄乱了。我有一个多步骤形式，并将当前步骤保持在组件状态。此外，在步骤之间，我需要更改同一组件中的URL，因此我有一个条件路由。在下一个和上一个之间，我正在调用一个函数以更新当前步骤，当前步骤计数器在单击步骤时就像魅力一样工作。当需要更改URL时，问题出现。

使用props.history.push（路由）正在重新渲染组件，并且当前的步骤计数器丢失并将其设置回0（其初始值）。我如何避免在该州放松柜台？代码片段如下：

const StepForm = (props, state, next, prev,) => [
  {
    title: "Step 1",
    content: <StepOne />,
    buttons: [
      null,
      <Button onClick={() => next_step()}> Next </Button>,
    ],
  },
  {
    title: "Step 2",
    content: (<stepTwo/>),
    buttons: [
      <Button
        onClick={() => {
          next_step(); //Somehow this does not execute in this step. If
          props.history.push( // I remove history.push, the state is kept
            `/items/${item.id}`
          );
        }}
      >
        Next
      </Button>,
    ],
  },
  {
    title: "Step 3",
    content: <StepThree />,
    buttons: [
      null,
      <Button onClick={() => next_step()}> Done </Button>,
    ],
  },
];


export class ItemPage extends Component {
  state = {
    step: 0,
  };
  
  next_step = () => this.setState((prevState) => ({ step: prevState.step + 1 }));
  prev_step = () => this.setState((prevState) => ({ step: prevState.step - 1 }));
  
  render() {
    const Forms = StepForms(
      this.props,
      this.state,
      this.next_step,
      this.prev_step);
    
    <Steps step={this.state.step}>
       {Forms.map((step) => (
         <Steps.Step key={step.title} title={step.title} />
       ))}
    </Steps>
    <Col span={24}>
      <div>{Forms[this.state.step].content}</div>
    </Col>

问题是组件是用props.history.push（）重新渲染的，并且状态中的步骤变量已重置为0。我应该如何避免重置状态？

谢谢

Answer 1

使用简单的redux的问题是，每当发生刷新时，所有状态都会丢失。可以使用 redux-persist 。该库是为了克服这个问题而开发的。通过与redux一起使用此库。即使发生URL更改或刷新，它也可以保存您的状态。它基本上是一种类型。浏览器中的本地存储。它易于设置。

它基本上将PersistreDucer和PersistStore添加到您的设置中。这使状态即使在刷新中也可以保存。
您需要做的就是。
在app.js中使用这样的persist Gate将您的应用程序结束

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore } from 'redux-persist';

let persistor = persistStore(store);

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
          <App/>
      </PersistGate>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

然后在store.js

import { configureStore } from '@reduxjs/toolkit';
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import thunk from 'redux-thunk';

import counterReducer from '../features/counter/counterSlice';

const reducers = combineReducers({
  counter: counterReducer,
});

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

const persistedReducer = persistReducer(persistConfig, reducers);

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

export default store;

通过这种方式，您可以轻松地添加redux持续存在以保存状态。这将解决您的问题。谢谢。

这是一篇完整的详细文章。
使用redux-persist with redux