我如何将数据从一页传递到另一页以做出反应？

Question

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

App.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}
}

clientdetails.js中的代码，保存数据和首页功能

DelayReturnToHomePage = (e) => {

  setTimeout(() => {
    this.props.history.push({
      pathname: '/'
    }) 

  }, 1700)
}

handleSaveData(){

  this.setState({
    saveDataClicked: 'yes'
  })

  if(this.state.live == 1)
  {

    fetch(`http://ca-fpscfb2:4000/SaveDataRedFlags?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&redFlags=${Base64.encode(this.state.redFlagContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataMaintenanceReleases?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&maintenanceReleases=${Base64.encode(this.state.maintenanceContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataNotes?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&notes=${Base64.encode(this.state.notesContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataStatus?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&status=${Base64.encode(this.state.selectedOption.value)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataSummary?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&summary=${this.state.summaryLiveOn}`) && 
    fetch(`http://ca-fpscfb2:4000/SaveDataStatusColor?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&statuscolor=${this.state.selectedOption.label}`)  
    .then( 
      this.setState({showSaveModal: true}),
      setTimeout(() => {
        this.handleSaveDataHide();
      }, 3000)
    )
  }
  else
  {
    fetch(`http://ca-fpscfb2:4000/SaveDataRedFlags?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&redFlags=${Base64.encode(this.state.redFlagContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataMaintenanceReleases?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&maintenanceReleases=${Base64.encode(this.state.maintenanceContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataNotes?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&notes=${Base64.encode(this.state.notesContent)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataStatus?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&status=${Base64.encode(this.state.selectedOption.value)}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataSummary?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&summary=${this.state.summaryLiveOff}`) &&
    fetch(`http://ca-fpscfb2:4000/SaveDataStatusColor?dashboardID=${this.state.dashboardID}&airlineID=${this.state.airlineID}&statuscolor=${this.state.selectedOption.label}`) 
    .then( 
      this.setState({showSaveModal: true}),
      setTimeout(() => {
        this.handleSaveDataHide();
      }, 3000)
    )
  }
}

Answer 1

你可以通过历史路由传递数据，

按照您的代码执行：-

DelayReturnToHomePage = (e) => {

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


  }, 1700)
}

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