如何在React页面间传递状态？基于Body.js状态管理的实现问询

嘿，针对你在Body.js里管理employee和employeeCurrent状态并要传递到其他页面的需求，我结合你使用的类组件和react-router-dom，整理了几种实用的方案：

1. 通过React Router的Link传递state（快速临时传递） #

这是最简单的方式，适合不需要持久化的临时状态传递，直接在你现有的Link组件里添加state属性：

修改Body.js里的Link代码： #

<Link 
  to={{ 
    pathname: "/你的目标页面路径", 
    state: { 
      employee: this.state.employee, 
      employeeCurrent: this.state.employeeCurrent 
    } 
  }}
>
  跳转到目标页面
</Link>

在目标页面获取状态： #

如果目标页面是类组件，可以通过this.props.location.state拿到传递的状态：

class TargetPage extends React.Component {
  render() {
    const { employee, employeeCurrent } = this.props.location.state || {};
    return (
      <div>
        <h2>当前选中员工：{employeeCurrent?.name}</h2>
        <p>员工列表总数：{employee?.length}</p>
      </div>
    );
  }
}

⚠️ 注意：这种方式的状态存在内存中，页面刷新后会丢失，适合临时跳转传递数据。

2. 使用React Context API（全局共享状态） #

如果你的状态需要在多个页面或组件中共享，或者希望刷新页面后状态不丢失，React Context是个不错的选择，不需要引入额外库：

步骤1：创建Context文件（比如EmployeeContext.js） #

import React from 'react';

// 创建Context，默认值可以设为空对象
const EmployeeContext = React.createContext({});

export default EmployeeContext;

步骤2：在App组件（或Body的父组件）中用Provider包裹路由 #

把你的路由组件放在EmployeeContext.Provider里，将状态作为value传递：

import EmployeeContext from './EmployeeContext';
import Body from './Body';
import TargetPage from './TargetPage';
import { BrowserRouter as Router, Route } from 'react-router-dom';

class App extends React.Component {
  state = {
    employee: [],
    employeeCurrent: [],
    setEmployee: (data) => this.setState({ employee: data }),
    setEmployeeCurrent: (data) => this.setState({ employeeCurrent: data })
  };

  componentDidMount() {
    // 可从localStorage恢复持久化状态
    const savedEmployee = localStorage.getItem('employee');
    if (savedEmployee) {
      this.setState({ employee: JSON.parse(savedEmployee) });
    }
  }

  render() {
    return (
      <EmployeeContext.Provider value={this.state}>
        <Router>
          <Route path="/" component={Body} />
          <Route path="/target" component={TargetPage} />
        </Router>
      </EmployeeContext.Provider>
    );
  }
}

步骤3：修改Body.js使用Context更新状态 #

import EmployeeContext from './EmployeeContext';

class Body extends React.Component {
  static contextType = EmployeeContext;

  componentDidMount(){
    axios.get('http://127.0.0.1:3004/employee')
      .then(response => {
        this.context.setEmployee(response.data);
        // 持久化到localStorage
        localStorage.setItem('employee', JSON.stringify(response.data));
      })
      .catch(err => console.log(err));
  }

  // 选中员工时更新全局状态
  handleSelectEmployee = (employee) => {
    this.context.setEmployeeCurrent(employee);
  }

  render() {
    const { employee, employeeCurrent } = this.context;
    return (
      // 你的原有渲染内容
      <Link to="/target">跳转到目标页面</Link>
    );
  }
}

步骤4：在目标页面获取全局状态 #

import EmployeeContext from './EmployeeContext';

class TargetPage extends React.Component {
  static contextType = EmployeeContext;

  render() {
    const { employee, employeeCurrent } = this.context;
    return (
      <div>
        <h2>全局共享的员工信息</h2>
        <p>当前员工：{employeeCurrent?.name}</p>
        <ul>
          {employee.map(emp => <li key={emp.id}>{emp.name}</li>)}
        </ul>
      </div>
    );
  }
}

3. 通过URL查询参数传递（适合简单数据） #

如果你的状态是简单的字符串或数字（比如员工ID），可以通过URL查询参数传递，然后在目标页面根据ID重新请求数据：

修改Body.js的Link： #

<Link to={`/target?employeeId=${this.state.employeeCurrent.id}`}>
  跳转到目标页面
</Link>

在目标页面获取参数并请求数据： #

class TargetPage extends React.Component {
  state = {
    currentEmployee: null
  };

  componentDidMount() {
    const params = new URLSearchParams(this.props.location.search);
    const employeeId = params.get('employeeId');
    if (employeeId) {
      axios.get(`http://127.0.0.1:3004/employee/${employeeId}`)
        .then(response => this.setState({ currentEmployee: response.data }))
        .catch(err => console.log(err));
    }
  }

  render() {
    const { currentEmployee } = this.state;
    return currentEmployee ? (
      <div>
        <h2>员工详情：{currentEmployee.name}</h2>
      </div>
    ) : <div>加载中...</div>;
  }
}

这种方式的好处是URL可以分享，刷新页面也能重新获取数据，适合需要持久化的简单标识类数据。

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