next.js 如何从react-router-dom通过Link传递函数?

afdcj2ne  于 2023-08-04  发布在  React
关注(0)|答案(1)|浏览(97)

我可以使用state通过react-router-dom(6.14.0)中的Link组件传递常规数据。但是,如果你发送一个函数,它是未定义的。
这里的另一个帖子提到使用“数据”而不是“状态”,但这似乎也不起作用。

<Link
 className={styles.link}
 style={{textDecoration: 'none'}}
 to='/feedback-detail'
 state={{ feedback: request, requests: requests }}
 data={{ setRequests: setRequests }}
 >

字符串
然后在/feedback-detal页面上:

const location = useLocation();
const { feedback, requests } = location.state;
const { setRequests } = location.data;


我仍然得到:
“无法解构'location.data'的属性'setRequests',因为它未定义”
我需要能够从页面更新状态,使用setRequest。不幸的是,目前的设置方式是它们不共享父节点,所以这是我认为发送数据的最简单的方法,除了setRequests函数外,它适用于所有内容。
我刚刚意识到的另一件事...我使用NextJS 13,但使用react-router-dom的链接。我看到Next有来自next/link的Link。也许我应该用这个。虽然我不确定这是否会改变解决方案。

acruukt9

acruukt91#

我认为您可以尝试使用encodeURIComponent对函数进行编码,如下所示

<Link
     className={styles.link}
     style={{textDecoration: 'none'}}
     to=`/feedback-detail/${endoceURIComponent(yourFunction.toString())}`
     state={{ feedback: request, requests: requests }}
     data={{ setRequests: setRequests }}
     >

字符串
然后,在feedback-detail组件中,使用useParams获取函数String

const { functionString } = useParams();


解码你的功能

const decodedFunction = decodeURIComponent(functionString);


然后,

const yourFunction = eval(`(${decodedFunction})`);


要使用它,只需调用yourFunction()

相关问题