history.push 和狀態重置

Question

使用 props.history.push 步驟表單會搞亂我的狀態。 我有一個多步驟表單並將當前步驟保持在組件的狀態。 此外，在步驟之間我需要更改同一組件中的 URL，因此我有一個條件路由工作。 在下一個和上一個之間，我正在調用一個函數來更新當前步驟，當單擊這些步驟時，當前步驟計數器就像一個魅力一樣工作。 需要更改 URL 時會出現問題。

使用 props.history.push(route) 正在重新渲染組件，當前計步器丟失並設置回 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() 重新渲染，狀態中的 step 變量重置為 0。我應該如何避免重置狀態？

謝謝

Answer 1

使用簡單 redux 的問題是，每當刷新發生時，所有狀態都會丟失。這個問題可以使用redux-persist輕松解決。這個庫是為了克服這個問題而開發的。通過將它與 redux 一起使用。它會讓你的即使在 url 更改或刷新發生時也會保存狀態。它基本上是瀏覽器中的一種本地存儲。它很容易設置。

它基本上將persistReducer 和persistStore 添加到您的設置中。即使在刷新時也可以保存狀態。 你需要做的就是。 在 App.js 中使用像這樣的持久門來包裝您的應用程序

 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 persist 以永久保存您的狀態。這將解決您的問題。謝謝。

這是一篇完整的詳細文章。 將 redux-persist 與 redux 一起使用