React中如何访问从其他页面导入的函数内部的变量？

问题原因 #

你当前的写法有三个核心问题导致拿不到值：

1. objVar 是 handleClick 函数的局部变量，函数执行完成后就会被销毁，外部无法直接访问
2. handleClick 函数没有设置返回值，调用后默认返回 undefined，你对 undefined 解构属性自然拿到 undefined
3. Page1 是具名导出 handleClick，Page2 用默认导入语法导入，实际导入的 handleClick 本身就是 undefined

解决方案 #

根据你的场景选择对应方案：

方案1：模块顶层变量存储（仅适用于SPA单页应用，刷新会丢失数据） #

将共享变量从函数作用域提到模块顶层，配套导出读写方法：

// Page-1 代码修改
let sharedObj = null

// 存值方法
export const handleClick = (obj) => {
  sharedObj = obj  
}

// 取值方法
export const getSharedObj = () => sharedObj

// Page-2 代码修改
// 注意用具名导入，加花括号
import { getSharedObj } from '../../NewsWithSidebar/NewsWithSideBar'

function Single() { 
  const objVar = getSharedObj()
  console.log(objVar)
}

方案2：SessionStorage存储（支持刷新，大小限制5MB，满足绝大多数长文本/对象存储需求） #

// Page-1 点击时存值
export const handleClick = (obj) => {
  // 对象转JSON字符串后存储
  sessionStorage.setItem('sharedCardData', JSON.stringify(obj))
}

// Page-2 取值
function Single() { 
  const objVar = JSON.parse(sessionStorage.getItem('sharedCardData'))
  console.log(objVar)
  // 用完可以删除避免数据残留
  // sessionStorage.removeItem('sharedCardData')
}

如果是MPA多页面应用，优先选这个方案，跳转页面不会丢失数据。

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