能否通过Link组件传递setState修改父组件状态？传递后变量未定义求解

为什么传递setter函数会导致其他状态异常？ #

React Router的Link组件通过state传递的数据，最终依赖浏览器的History API存储。而History API会对state做JSON序列化处理——但函数无法被JSON序列化，这会导致整个state对象的序列化过程失败，进而让原本能正常传递的time、date等变量也无法正确解析，最终在接收组件里拿到的location.state出现异常，表现为变量未定义。

正确的处理方式 #

Link的state只适合传递可序列化的简单数据（比如字符串、数字、普通对象/数组），绝对不能传递函数、类实例这类无法序列化的值。想要在详情页修改原页面的状态，推荐以下几种方案：

1. 用React Context封装状态

把状态和对应的setter函数封装到全局Context中，让原页面和详情页都能直接访问：

// 新建JobsContext.js
import { createContext, useContext, useState } from 'react';

const JobsContext = createContext();

export function JobsProvider({ children }) {
  const [currentJobs, setCurrentJobs] = useState([]);
  return (
    <JobsContext.Provider value={{ currentJobs, setCurrentJobs }}>
      {children}
    </JobsContext.Provider>
  );
}

export function useJobs() {
  return useContext(JobsContext);
}

在根组件中包裹Provider：

import { JobsProvider } from './JobsContext';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <JobsProvider>
        {/* 你的路由和页面组件 */}
      </JobsProvider>
    </BrowserRouter>
  );
}

原页面的Link只传递必要的序列化数据：

<Link
  to={`device/${comp.hostname}`}
  state={{
    time: time,
    date: date,
    currentJobs: currentJobs
  }}
>
  {/* 点击跳转的内容 */}
</Link>

详情页直接从Context获取setter：

import { useLocation } from 'react-router-dom';
import { useJobs } from './JobsContext';

function DeviceDetail() {
  const location = useLocation();
  const time = location.state.time;
  const date = location.state.date;
  const { currentJobs, setCurrentJobs } = useJobs();

  // 这里可以正常调用setCurrentJobs修改状态
  return (
    <div>
      {/* 详情页内容 */}
    </div>
  );
}

2. 状态提升到共同父组件

如果详情页和原页面有共同的父组件，可以把currentJobs和setCurrentJobs提升到父组件中，通过props传递给两个页面组件。

3. 跳转回原页面时携带参数

如果详情页的操作只需要在返回原页面时更新状态，可以在详情页完成操作后，通过navigate跳转回原页面时携带参数，原页面监听路由变化，根据参数更新currentJobs。

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