React中API调用后状态持久化问题：如何保持PUBLISH状态

首先得明确问题根源：你当前使用的是组件内部的局部state，当导航到其他页面时，当前组件会被卸载，它的state也会随之销毁。等你返回该页面时，组件重新挂载，state回到初始值，所以才会从"PUBLISH"变回"CREATE"。要让状态在整个应用生命周期中保持，咱们可以用全局状态管理或持久化存储方案，下面给你几个实用的解决办法：

方案一：使用React Context API（轻量全局状态） #

如果你的应用复杂度不高，Context API足够满足需求，它能让状态在组件树中全局共享，不会因组件卸载丢失。

1. 创建全局状态Context #

新建一个PublishContext.js文件：

import React, { createContext, useState, useContext, useEffect } from 'react';

const PublishContext = createContext();

export const PublishProvider = ({ children }) => {
  // 初始化状态，优先从localStorage读取（可选，实现页面刷新也不丢失）
  const [isPublished, setIsPublished] = useState(() => {
    return localStorage.getItem('isPublished') === 'true';
  });

  // 状态变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('isPublished', isPublished.toString());
  }, [isPublished]);

  return (
    <PublishContext.Provider value={{ isPublished, setIsPublished }}>
      {children}
    </PublishContext.Provider>
  );
};

// 自定义Hook，简化组件调用
export const usePublish = () => {
  const context = useContext(PublishContext);
  if (!context) {
    throw new Error('usePublish必须在PublishProvider内部使用');
  }
  return context;
};

2. 在根组件包裹Provider #

比如在App.js中：

import { PublishProvider } from './PublishContext';

function App() {
  return (
    <PublishProvider>
      {/* 你的路由、其他组件 */}
    </PublishProvider>
  );
}

3. 修改你的组件代码 #

把局部state替换为Context的全局状态（这里以函数组件为例，类组件可使用Context.Consumer或高阶组件）：

import { usePublish } from './PublishContext';
import { useState } from 'react';

function YourMarketComponent() {
  const { isPublished, setIsPublished } = usePublish();
  const [loading, setLoading] = useState(false);

  const publishSample = () => {
    setLoading(true);
    this.Service
      .publish()
      .then((response) => {
        // 发布成功后设置全局状态
        setIsPublished(true);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        // 请求结束后关闭loading
        setLoading(false);
      });
  };

  return (
    <div>
      {loading ? (
        <div>加载中...</div>
      ) : isPublished ? (
        <div>{ENUM.PUBLISH}</div>
      ) : (
        <div>
          <p>{ENUM.CREATE}</p>
          <button onClick={publishSample}>发布</button>
        </div>
      )}
    </div>
  );
}

方案二：直接使用localStorage（最简持久化） #

如果不需要全局共享状态，只是当前组件需要记住发布状态，可直接用localStorage存储，组件挂载时读取：

class YourMarketComponent extends React.Component {
  state = {
    loading: false,
    isPublished: localStorage.getItem('isPublished') === 'true' // 初始化时读取本地存储
  };

  publishSample = () => {
    this.setState({ loading: true });
    this.Service
      .publish()
      .then((response) => {
        // 更新state并同步到localStorage
        this.setState({ isPublished: true });
        localStorage.setItem('isPublished', 'true');
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  };

  render() {
    const { loading, isPublished } = this.state;
    return (
      <div>
        {loading ? (
          <div>加载中...</div>
        ) : isPublished ? (
          <div>{ENUM.PUBLISH}</div>
        ) : (
          <div>
            <p>{ENUM.CREATE}</p>
            <button onClick={this.publishSample}>发布</button>
          </div>
        )}
      </div>
    );
  }
}

方案三：使用Redux/Redux Toolkit（复杂应用首选） #

如果你的应用有大量全局状态需要管理，Redux或Redux Toolkit会更合适，它能规范状态流转，还可配合中间件实现复杂逻辑。这里给个Redux Toolkit的简单示例：

1. 创建状态Slice #

import { createSlice } from '@reduxjs/toolkit';

const publishSlice = createSlice({
  name: 'publish',
  initialState: {
    isPublished: localStorage.getItem('isPublished') === 'true'
  },
  reducers: {
    setPublished: (state) => {
      state.isPublished = true;
      localStorage.setItem('isPublished', 'true');
    }
  }
});

export const { setPublished } = publishSlice.actions;
export default publishSlice.reducer;

2. 配置Store #

import { configureStore } from '@reduxjs/toolkit';
import publishReducer from './publishSlice';

export const store = configureStore({
  reducer: {
    publish: publishReducer
  }
});

3. 在根组件包裹Provider #

import { Provider } from 'react-redux';
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      {/* 路由和组件 */}
    </Provider>
  );
}

4. 在组件中使用状态 #

import { useDispatch, useSelector } from 'react-redux';
import { setPublished } from './publishSlice';
import { useState } from 'react';

function YourMarketComponent() {
  const isPublished = useSelector(state => state.publish.isPublished);
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);

  const publishSample = () => {
    setLoading(true);
    this.Service
      .publish()
      .then((response) => {
        dispatch(setPublished());
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  // 渲染逻辑同之前示例
}

另外要提醒下：你原来的代码里，then中设置loading: true逻辑是反的——应该在请求开始时设loading为true，请求结束（无论成功失败）设为false，再单独用isPublished状态控制显示内容，上面的示例已经修正了这个问题。

内容的提问来源于stack exchange，提问作者Singh