如何通过反应路由器链接将状态数据传递到另一个网页？答案

【问题标题】：How to pass state data to another webpage through react router link?如何通过反应路由器链接将状态数据传递到另一个网页？
【发布时间】：2021-04-13 19:17:53
【问题描述】：

我正在构建一个基于 react/django 的问题跟踪器应用程序。我正在尝试将项目（作为项目对象数组的状态变量）传递给 manageusers，以便我可以访问 manageusers 中的项目名称。这样做的原因是我可以使用该项目名称来查找与其关联的项目，并将用户分配给该项目。我正在使用状态对象将项目传递给链接，但是当我尝试加载 manageusers 网页时，它表明状态未定义。请记住，来自 django 后端的项目数据很好，我只是想把这些数据放到 manageusers 上。

项目

project.js

import { useState, useEffect } from "react";
import { Grid, TextField, Button, Typography } from "@material-ui/core";
import {
    BrowserRouter as Router,
    Link,
    Route,
    Switch,
  } from 'react-router-dom';

const project = () => {
  const [name, setName] = useState();
  const [description, setDescription] = useState();
  const [projects, setProjects] = useState([]);

  const post = () => {
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json"},
      body: JSON.stringify({
        name: name,  
        description: description,
      }),
    };
    fetch("/api/newProject",requestOptions)
      .then((response) => response.json())
      .then((data) =>{
       
      })
  }

  useEffect(() => {
    fetch("/api/manageprojects")
    .then((response) => response.json())
    .then((data) =>{
        setProjects(data)
    })
  }, [])

      return (
        <div>
          <body>
              <form action="#" method="POST">
                <TextField onChange={(e) => setName(e.target.value)}> </TextField>
                <br>
                </br>
                <TextField onChange={(e) => setDescription(e.target.value)}> </TextField>
                <br>
                </br>
                <Button onClick={() => post()}> Create New Project </Button>
              </form>
          </body>
          <div>
                {projects && projects.map(project => (
                    <Grid item xs={3}>
                        <Typography component="h5" variant="h5">
                            <h5> {project.name} </h5>
                            <h5> {project.description} </h5>
                        </Typography>
                    </Grid>
                ))}
          </div>
          <Link to={{
            pathname: '/manageusers',
            state: { 
                projects: projects
            }
          }}>Manage Users
          </Link>
        </div>
      );
  }
 


export default project;

管理用户

manageusers.js 的一部分

const Name = (props) => {
    const {projects} = props.location.state;
    console.log(projects.name);
}   
      return (
          <div>
            <Select 
                value={selectedValue}
                options={roles}
                onChange={handleChange}
                isOptionDisabled={option => option.isDisabled}
            />
            <div class="ex1">
                {role && role.map(roles => (
                        <Grid item xs={3}>
                            <Typography component="h5" variant="h5">
                                <h5> {roles.username} </h5>
                            </Typography>
                        </Grid>
                ))}
            </div>
            <Name/>
        </div>

【问题讨论】：

标签： reactjs react-router react-router-dom react-props react-component

【解决方案1】：

而不是使用 React Router 链接，

您需要的是一个全局存储，例如 Redux 或 Mobx。这样您就可以使用相关数据更新状态并在新页面上检索它们。

如果您需要解决方法，可以使用 history.pushState()

基本上，您可以推送到您的位置并使用它的状态。

在下一页，在本例中为 MyComp，您可以使用 history.state 检索推送的数据。

【讨论】：

哦，好吧，我肯定会研究 Redux 或 Mobx。我也会尝试 history.pushState() 。感谢您的帮助！