我正在构建一个基于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>
不使用React Router链接
你需要的是一个全球性的商店，如Redux或Mobx。这样，您就可以使用相关数据更新状态，并在新页面上检索它们。
如果你需要一个变通方法，你可以使用history.pushState((
基本上，你可以推到你的位置，并与它一个州。
在下一个页面上，也就是本例中的MyComp，您可以使用history.state来检索推送的数据。