从链接调用反应组件并传递道具时，页面重新加载失败

Question

我对反应和键入脚本非常陌生，我面临着刷新浏览器时页面重新加载失败的问题，我相信没有设置 class 的 state 我正在正确重新加载。 你能帮忙看看下面的代码吗？

我正在从Link发送道具并加载组件。 像下面这样的东西。

{
    id: 'jobRunId',
    header: 'Job Run ID',
    cell: item => <Link to ={{
      pathname: "/workItemsPage/" + item.jobRunId,
      workitem: item.workItems
    }}>{item.jobRunId}</Link>,
    allowLineWrap: true
  },

这是我的路由器。

<Route path="/workItemsPage/:jobId" component={workItemsPage} />

我正在调用的组件首次用于页面加载时效果很好。

export class workItemsPage extends React.Component {

    render() {
        /**
         * Iterate over the list of workitems to display
         */
        var workItemList = this.props.location.workitem;
        var workItemIteration = [];
        for (var i = 0; i < workItemList.length; i++) {
            workItemIteration.push(<WorkItemDetails workItem = { workItemList[i] } key = {i}/>);
        }
        return (
            <div>
                <WorkItemsBreadcrumbs />
                <PageHeader jobId = {this.props.match.params.jobId}/>
                <div>
                    {workItemIteration}
                </div>
            </div>
        );
    }
}

export default workItemsPage;

它第一次加载很好，每当我重新加载同一页面时它就会失败，说我发送的道具是未定义的。 我相信第二次没有道具。

workItemsPage.jsx:18 Uncaught TypeError: Cannot read property 'length' of undefined
    at workItemsPage.render (workItemsPage.jsx:18)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at unbatchedUpdates (react-dom.development.js:21909)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)

Answer 1

考虑到 React 中的page refresh或浏览器中的任何其他应用程序，您可以通过以下几种方式将数据从一个页面传递到另一个页面：-

• URL 中的查询参数。
• localStorage / session 存储。
• cookies

无需使用任何后端服务器。

注意：react-router 中的Link仅在页面不刷新时传递 props。 因为当页面刷新时，整个React树被重新初始化，这基本上意味着它会重新启动您的应用程序。 请记住，react-router 中的Link永远不会知道您通过 props 传递的数据。