通过 Redirect 将数据传递给组件

Posted 2023-02-22

【中文标题】通过 Redirect 将数据传递给组件

【英文标题】：Passing data to a component through Redirect

【发布时间】：2021-07-18 00:07:25

【问题描述】：

我在将作为响应从一个表单组件接收到的数据传递到另一个组件时遇到问题。

我正在使用类组件来处理生命周期方法，例如用于 api 调用的 componentDidMount() 来填充表单的选择选项的一些信息。

我已经查看了这里已经给出的不同答案，但似乎没有一个有效，因为我得到了错误

TypeError: undefined has not properties 尝试显示数据时。

我正在从响应中捕获数据，如下所示

主要组件

  handleSubmit = (event) => 
    axios
      .get("http://localhost:3000/results", 
        params: 
          ...
        ,
      )
      .then((res) => 
        this.setState( submitted: true );
        return res.data;
      )
      .then((data) => 
        this.setState( res_data: data );
      );

    event.preventDefault();

如果表单提交如下，则使用render方法进行重定向

var response_data = this.state.res_data
if (this.state.submitted) 
      console.log("Redirecting")
      return <Redirect push to= pathname: "/results", state:res_data: response_data  />;
     else

处理 /results 路由的组件是一个简单的标头，带有一个用于检查数据的 console.log。

第二个组件/结果路径

const Results = (props) => 
    console.log(this.locations.state)
    return <h2>Results</h2>


export default Results

应用组件

...
          <Switch>
            <Route path="/signup">
              <SignUp />
            </Route>

            <Route path="/results">
            </Route>
            <Route path="/">
              <Home />
            </Route>
          </Switch>

【问题讨论】：

this.locations is not defined - 哪里用过？

您缺少一些代码

我可以展示整个班级的代码，但它太多了（178 行）。我只是介绍调用重定向的位置以及我如何存储我试图通过重定向传递的数据

【参考方案1】：

此帖子与ReactJS - Pass props with Redirect component重复？

答案和帖子里提到的一样