Javascript 在React中以模态形式获取调用后重定向到另一页

在使用history.props从react中获取来自Modal的GET调用后，我尝试重定向到另一个页面，但我不知道应该在那里写什么来显示我的实际数据。我编辑了一些东西，并在历史记录中添加了一些东西。报告中的道具和组件didmount这是我的代码：

import React, { Component } from "react";
import Datee from "./Date";
import { withRouter } from "react-router";

export class CarReports extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectOptions: [],
      movie: [],
      mov: "",
      query: "",
      results: []
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }



  async handleSubmit(e) {
    let authToken = localStorage.getItem("Token");
    try {
      const from = e.target.elements.from.value;
      const to = e.target.elements.to.value;
      const selections = [...e.target.elements.selectOptions.options].filter(
        opt => opt.selected
      );
      const selectedValues = selections.map(opt => opt.value);
      const selectedString = selectedValues.join(",");
      e.preventDefault();
      const res = await fetch(
        `http://localhost:8000/api/1/deliveries/report/?date__lte=${to}&date__gte=${from}&user=${selectedString}`,
        {
          method: "GET",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: "Bearer " + JSON.parse(authToken)
          }
        }
      );
      const movie = await res.json();
      console.log(movie);
      this.setState({
        movie
      });
      this.props.history.push({
    pathname: "/carreport",
    state: movie
  });
    } catch (e) {
      console.log(e);
    }

  }

  handleChange = e => {
    let target = e.target;
    let name = target.name;
    //here
    let value = Array.from(target.selectedOptions, option => option.value);
    this.setState({
      [name]: value
    });
  };

  render() {
    return (
      <div id="car" class="modal">
        <a
          href="# "
          rel="modal:close"
          className="float-right text-white h4"
          style={{
            background: "#b71c1c",
            borderRadius: "50%",
            padding: "10px",
            height: "32px",
            lineHeight: "10px"
          }}
        >
          &times;
        </a>
        <p className="mod" style={{ marginTop: "40px" }}>
          CARS REPORT
        </p>

        <form style={{ marginTop: "20px" }} onSubmit={this.handleSubmit}>
          <div>
            <Datee />
          </div>
          <div className="form-group" style={{ marginTop: "20px" }}>
            <label style={{ opacity: "0.6", fontSize: "10px" }}>
              CHOOSE A CAR
            </label>
            <select
              name="selectOptions"
              style={{ width: "390px" }}
              multiple={true}
              onChange={this.handleChange}
              value={this.state.selectOptions}
              class="form-control"
            >
              <option value="1">Choose Car From List</option>
              <option value="1">General Score</option>
              <option value="2">Dynamic</option>
              <option value="3">Speed</option>
              <option value="4">Fuel Save</option>
            </select>
          </div>

          <div style={{ marginTop: "50px" }}>
            <center>
              <button
                type="submit"
                value="Get Data"
                className="btn btn-login text-white font-weight-bolder boxx "
                style={{
                  height: "40px",
                  fontSize: "13px",
                  lineHeight: "30px",
                  width: "200px",
                  background: "rgba(183, 28, 28, 1)",
                  border: "none",
                  color: "white",
                  margin: "auto"
                }}
              >
                RAPORT
              </button>
            </center>
          </div>
        </form>
      </div>
    );
  }
}

export default withRouter(CarReports);

import React，{Component}来自“React”；
从“/Date”导入日期；
从“react router”导入{withRouter}；
导出类CarReports扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选择选项：[]，
电影：[]，
mov:“，
查询：“”，
结果：[]
};
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
异步handleSubmit（e）{
让authToken=localStorage.getItem（“令牌”）；
试一试{
常量from=e.target.elements.from.value；
常数to=e.target.elements.to.value；
常量选择=[…e.target.elements.selectOptions.options].filter(
opt=>opt.selected
);
const selectedValues=selections.map（opt=>opt.value）；
const selectedString=selectedValues.join（“，”）；
e、 预防默认值（）；
const res=等待取数(
`http://localhost:8000/api/1/deliveries/report/?date__lte=${to}&date\uu gte=${from}&user=${selectedString}`，
{
方法：“获取”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json”，
授权：“承载者”+JSON.parse（authToken）
}
}
);
const movie=wait res.json（）；
console.log（电影）；
这是我的国家({
电影
});
这个。道具。历史。推({
路径名：“/carreport”，
州：电影
});
}捕获（e）{
控制台日志（e）；
}
}
handleChange=e=>{
设target=e.target；
让name=target.name；
//这里
让value=Array.from（target.selectedOptions，option=>option.value）；
这是我的国家({
[名称]：值
});
};
render（）{
返回(

汽车报告

选一辆车
从列表中选择汽车
总分
动态
速度
节油
拉波特
);
}
}
使用路由器导出默认值（CarReports）；

这是我想显示数据的careport.js页面。我不知道在这里该怎么办

import React, { Component } from "react";
import ReactToExcel from "react-html-table-to-excel";
import CarReports from "../CarReports";

class Report extends Component {

componentDidMount() {
    const movie = this.props.location.state.movie;
    this.setState({
      movie
    });
    console.log(movie)
  }

  render() {
    return (
      <div className="container" style={{ marginTop: "50px" }}>
        <CarReports />
        <div className="headerr" style={{ marginTop: "25px" }}>
          <h6>CAR REPORT</h6>
          <p className="p">From 12-17-2019 To 12-12-2019</p>
          <div className="driver report">
            <table className="table" id="table-to-xls">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Full Name</th>
                  <th>Car Quantity</th>
                  <th>Mileage[Km]</th>
                  <th>Fuel Consumed[L]</th>
                  <th className="t">
                    Average Fuel<br></br> Consumed[L/100km]
                  </th>
                  <th className="t">Overspeed Distance[%]</th>
                  <th className="t">
                    Critical <br></br>Overspeed [qty.]
                  </th>
                  <th>Score: Overall</th>
                </tr>
              </thead>

              <tfoot>
                <tr className="thead">
                  <th></th>
                  <th>Summary</th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th></th>
                </tr>
              </tfoot>
            </table>

            <div style={{ marginTop: "40px" }}>
              <center>
                <a className="btn" href="#car" rel="modal:open" id="bttt">
                  NEW REPORT
                </a>

                <ReactToExcel
                  className="btn btn-success btn-lg bb"
                  table="table-to-xls"
                  filename="SoftbikeReport"
                  sheet="sheet 1"
                  buttonText="EXPORT CSV"
                />
              </center>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Report;

import React，{Component}来自“React”；
从“react html table to excel”导入ReactToExcel；
从“./CarReports”导入CarReports；
类报表扩展组件{
componentDidMount（）{
const movie=this.props.location.state.movie；
这是我的国家({
电影
});
console.log（电影）
}
render（）{
返回(
汽车报告
从2019年12月17日至2019年12月12日

不
全名
汽车数量
里程[公里]
耗油量[升]
平均耗油量

消耗量[L/100km]
超速距离[%]
严重超速[数量]
分数：总体
总结
);
}
}
导出默认报告；

使用react路由器的状态API重定向时，可以传递状态，如下所示：

/** INSIDE CarReports.jsx */
export class CarReports extends Component {
  ...
  async handleSubmit() {
    ...
    const res = await fetch(...);
    ...
    const movie = await res.json();
    this.setState({ movie });
    this.props.history.push({
      pathname: "/carreport",
      state: movie
    });
  }
  ...
}

然后，您可以访问

CarReport.jsx

中的获取结果，如下所示：

export class CarReport extends Component {
  componentDidMount() {
    const movie = this.props.location.state.movie;
  }
  ...
}

以下是更多的资源：

---

您可以使用上下文在重新路由时传递状态，如下所示：或者您可以设置Redux存储以保持全局状态，并在应用程序的不同路由中使用它。对于更复杂的状态对象，这可能是一个更好的解决方案。嘿，我尝试了这个方法，但是我遇到了一个错误，我像这样尝试

componentDidMount（）{const movie=This.props.location.state.movie；This.setState（{movie}）；console.log（movie）}

@JohnCdf