javascript - ReactJS-访问不同页面上的数据

Question

我试图在一个页面上访问从用户收集的数据，并在另一页面上使用它。我尝试了以下这些文章：


  https://travishorn.com/passing-data-between-classes-components-in-react-4f8fea489f80
  
  https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17
  
  https://codeburst.io/react-js-pass-data-from-components-8965d7892ca2


我无法使其正常工作。 this.props.{variableName}基普返回未定义状态。我的代码如下。

以下是主页：

import React, { Component } from 'react';
import {Button} from 'reactstrap';
import { browserHistory } from 'react-router';

class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      working: "",
    };
  }

  WorkReqNav(){
    this.setState=({working: "WORKING"});
    browserHistory.push("/WorkReq");
  }

  render() {
    return (
      <div>
        <Button size="lg" onClick={this.WorkReqNav.bind(this)} type='button'>HIT IT!</Button>
      </div>
    );
  }
}

export default HomeScreen;

以下是workReq屏幕：

import React, { Component } from 'react';
import {Button} from 'reactstrap';

class WorkReq extends Component {
  constructor(props) {
    super(props);
  }

  workCheck(){
    var working = this.props.working;
    alert(working);
  }

  render() {
    return (
      <div>
        <Button size="lg" onClick={this.workCheck.bind(this)} type='button'>HIT IT!</Button>
      </div>
    );
  }
}

export default WorkReq;

如果您还有其他需要，请告诉我。我对React真的很陌生，这是我第一次尝试这样的事情。

Answer 1

欢迎来到React世界。我敢打赌，当您逐渐熟悉可以在React上做的很棒的事情时，您一定会喜欢的。请耐心等待并继续练习。

因此，我要提出的第一个建议是，就像其他任何JavaScript环境一样，React的发展也非常迅速。因此，尽管基本原理是相同的，但是当您一方面关注新文章，另一方面，您可以检查所展示的库或方法是否最新。

系好安全带，让我们根据您的问题和示例中使用的库进行快速回顾。

在路由器方面，我看到您直接从react-router导出内容
当我们检查react-router的npm页面（https://www.npmjs.com/package/react-router）时，他们提出以下建议


  如果您正在编写将在浏览器中运行的应用程序，则您
  应该改为安装react-router-dom


以下软件包https://www.npmjs.com/package/react-router-dom
您可以通过查看其官方页面https://reacttraining.com/react-router/web/guides/philosophy获得更多详细信息并找到更多教程，以提高技能。

让我们看一下基于react-router-dom语法提供的代码片段sasha romanov

使用以下语法定义路由时使用react-router-dom

<Route path="/" component={HomePage} exact />

react-router-dom自动将match，location和history道具传递给HomePage组件。因此，当您console.log()这些道具时，您应该能够在控制台上显示某些内容。一旦可以访问history道具而不是browserHistory，就可以使用this.props.history.push("/some-route")进行重定向。

让我们看一下与withRouter相关的部分。在上面的示例中，我们可以使用history，因为HomePage组件被直接传递给我们从Router提取的react-router-dom组件。但是，在现实生活中，有些情况下您可能希望在未传递给history的组件中使用Router道具，而我们只能说它是可重复使用的按钮组件。对于这些情况，react-router-dom提供了一个称为withRouter的高阶组件。

一个高阶组件是（来自React的官方文档）
https://reactjs.org/docs/higher-order-components.html


  具体来说，高阶分量是一个函数
  组件并返回一个新组件。


因此，基本上，每当您将任何包含withRouter的组件（例如export default withRouter(MyWrappedReusableComponent)）包装在可重用组件中时，您都可以访问道具history，location，pathname

就是说，我对您的问题的第一印象似乎与路由器逻辑无关，而是在组件之间交换数据。

在最初的问题中，您提到

I am trying to access data gathered from a user on one page and use it on another page

有几种情况/方法可以解决此问题

1）如果这两个组件完全不相关，则可以使用状态管理系统（例如Redux，mobx），也可以使用React的上下文API https://reactjs.org/docs/context.html。但是，由于您是React的新手，所以我建议您在熟悉基本流程之前不要使用这些正确的知识来应对。因为在某个时候尝试使用大量的库等实现流是非常压倒性的。相信我，当我还是React的新手时，我曾尝试过，在打开第100个浏览器选项卡以从另一个库中寻找另一种方法后，我真的快要崩溃了。

2）您可以实现简单的父子关系以在组件之间传递数据。让我解释一下使用您的代码片段中的引用的含义。

我相信您想更新working，这是HomeScreen中的一种状态，并且您想在WorkReq组件中传递和使用此更新的值。

如果我们忽略所有路由逻辑并决定不使用路由，则需要执行以下操作

import React, { Component } from 'react';
import {Button} from 'reactstrap';
import { browserHistory } from 'react-router';
import WorkReqComponent from 'path/to/WorkReqDirectory';


class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      working: "WORKING",
    };
  }

  render() {
    return (
      <div>
        <WorkReqComponent working={this.state.working} />
      </div>
    );
  }
}

这样，当您在this.props.working;中登录WorkReqComponent时，您应该能够显示您传递的数据。您可以将其称为passing data from parent to child。

我检查了您列出的文章。他们似乎还解释了parent to child，child to parent或between siblings之间的数据传输。

在您的情况下，您真正​​需要实现的内容可以归类为between siblings

我使用react-router-dom为您准备了一个示例，以演示可能产生预期结果的一种可能的结构。
https://codesandbox.io/s/ojp2y0xxo6

在此示例中，状态在称为App的父组件内部定义。此外，状态更新逻辑也在父组件内部定义。 HomeScreen和WorkReq组件是App的子级，因此它们是同级。因此，为了在同级之间传输数据，其中之一被赋予了通过将状态更新逻辑传递给此组件来更新父级状态的任务。另一个任务是显示父状态的值。

此时，由于您是新手，并且为了不让自己感到不知所措，因此可以尝试使用parent-child-sibling数据传输主题。一旦熟悉了实现和逻辑，就可以逐渐开始研究React的上下文api和Redux / mobx。

让我知道您是否对我提供的样品有任何疑问