我如何将数据从一页传递到另一页?

时间:2018-12-10 16:57:46

标签: reactjs

我在主页( App.js )上,它显示数据,但是随后我单击其中一个数据链接,该链接重定向到包含数据(clientdetails .js)。在clientdetails.js页面上,我有一个可以编辑数据的按钮,当我返回首页( App.js )时,我希望重新渲染该数据。我将如何做出反应?当前显示未编辑的数据。

App.js代码

bool set = (current_byte & (1 << current_bit_position - 1)) != 0;

clientdetails.js中的代码,保存数据和主页功能

render(){
  const companyInfos = this.state.airlines && this.state.airlines.map((airline, idx) =>
  {

      if(airline.status == null)
      {
        airline.status = '';
      }

        return (

              <div className="col-md-2" key={idx} style={{clear: (idx == 0 && idx % 8 == 0) ? 'both' : 'none', 'width': 'auto'}}> 

                <div className="imgBorder" >
                <button type="button" className="close" onClick={() => this.handleClose(airline.airlineName, airline.airlineID)} >
                  <span >&times;</span>
                </button>
                <p key={idx} className="text-center" style={{fontSize:14, color: 'black', backgroundColor: Base64.decode(airline.status)  }}> {airline.airlineName + ' ' + airline.product }  </p>
                <Link to={{
                    pathname: '/Airlines/airlineName?=' + airline.airlineName +'&product?=' + airline.product + '&monthyear?=' + this.state.Dashboard,
                    state: {
                      airlineID: airline.airlineID,
                      airlineName: airline.airlineName,
                      airlineProduct: airline.product,
                      dashboardMonthYear: this.state.Dashboard,
                      live: this.state.live,
                    }
                  }} > 
                  <img className="img-responsive" src={require(`./images/${airline.imageName}`)} /> 


                </Link>
                </div>

                <br/>

              </div>         

        )
    });

  }
  {companyInfos}
}

1 个答案:

答案 0 :(得分:1)

您可以通过历史记录路由传递数据,

根据您的代码输入:-

DelayReturnToHomePage = (e) => {

  setTimeout(() => {
     var pageType = {
         pathname: '/',
         state: {
           data:{
             'pass':'your',
             'values':'here'
           }
         }
       }
    this.props.history.push(pageType); 


  }, 1700)
}

您将在主视图中的 props.location.state.data 中收到数据