当用户被点击时，它会转到他/她的个人资料页面。单击个人资料页面上的备注标签，用户可以在他/她的个人资料中添加备注。但是现在当任何用户添加注释时，注释也会出现在其他用户的个人资料中。如何使添加的注释仅出现在添加注释的用户个人资料中？
import React, { useState, useEffect } from "react";
import { Switch, Route } from "react-router-dom";
import PatientsTable from "./components/PatientsTable";
import EditPatient from "./components/EditPatient";
function App() {
const [patients, setPatients] = useState([]);
const [notes, setNotes] = useState([]);
const finalDraftNotes = notes.filter((note) => note.isFinal === true);
const fetchPatients = async () => {
const response = await fetch("http://localhost:3000/users");
const results = await response.json();
setPatients(results);
};
console.log(notes)
useEffect(() => {
fetchPatients();
}, []);
const handleAddNote = (note) => {
setNotes((prev) => [note, ...prev]);
};
const deleteDraftClick = (draftId) => {
setNotes((prev) => prev.filter((draft) => draft.id !== draftId));
};
const saveNotesClick = () => {
setNotes((prev) =>
prev.map((note) => {
return {
...note,
isFinal: true,
};
})
);
};
return (
<>
<Switch>
<Route exact path="/">
<PatientsTable patients={patients} />
</Route>
<Route path="/patient/:id">
<EditPatient
patients={patients}
notes={notes}
handleAddNote={handleAddNote}
deleteDraftClick={deleteDraftClick}
saveNotesClick={saveNotesClick}
finalDraftNotes={finalDraftNotes}
/>
</Route>
</Switch>
</>
);
}
export default App;
import React from "react";
import { Link } from "react-router-dom";
import {
makeStyles,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
} from "@material-ui/core";
const useStyles = makeStyles({
tableContainer: {
width: 700,
margin: "20px auto",
},
tableHead: {
backgroundColor: "rgb(25,118,210)",
},
tableRow: {
textDecoration: "none",
},
});
export default function PatientsTable({ patients, selectPatientClick }) {
const styles = useStyles();
return (
<TableContainer className={styles.tableContainer} component={Paper}>
<Table aria-label="simple table">
<TableHead className={styles.tableHead}>
<TableRow>
<TableCell>First Name</TableCell>
<TableCell align="right">Last name</TableCell>
<TableCell align="right">DOB</TableCell>
<TableCell align="right">Phone Number</TableCell>
<TableCell align="right">Email</TableCell>
</TableRow>
</TableHead>
<TableBody>
{patients.map((patient) => (
<TableRow
component={Link}
to={`/patient/${patient.id}`}
onClick={selectPatientClick}
key={patient.id}
className={styles.tableRow}
>
<TableCell component="th" scope="row">
{patient.fName}
</TableCell>
<TableCell align="right">{patient.lName}</TableCell>
<TableCell align="right">{patient.dob}</TableCell>
<TableCell align="right">{patient.pNumber}</TableCell>
<TableCell align="right">{patient.email}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
import React, { useState } from "react";
import { useParams } from "react-router-dom";
import { formatAMPM, generateId } from "../helper";
import { makeStyles, Button, TextField } from "@material-ui/core";
import AccountBoxIcon from "@material-ui/icons/AccountBox";
const useStyles = makeStyles({
form: {
display: "flex",
flexDirection: "column",
},
textFiled: {
width: 300,
},
btnsContainer: {
width: 300,
margin: "20px 0",
display: "flex",
justifyContent: "space-between",
},
});
export default function AddNote({ addNote }) {
const styles = useStyles();
const { id } = useParams();
const [note, setNote] = useState(null);
console.log(id);
const handleInputChange = ({ target }) => {
setNote(target.value);
};
const handleSubmitClick = (e) => {
e.preventDefault();
const newNote = {
userPic: <AccountBoxIcon color="primary" fontSize="large" />,
user: "Test User",
time: formatAMPM(new Date()),
note: note,
id: generateId(),
isFinal: false,
};
if (note) {
addNote(newNote);
}
setNote("");
};
const handleClearNoteClick = () => {
setNote("");
};
return (
<>
<form className={styles.form} onSubmit={handleSubmitClick}>
<TextField
className={styles.textFiled}
label="note"
multiline
variant="outlined"
rowsMax={Infinity}
onChange={handleInputChange}
placeholder="add a note"
value={note}
/>
<div className={styles.btnsContainer}>
<Button
label="add note"
variant="contained"
color="primary"
type="sbumit"
>
add note
</Button>
<Button
onClick={handleClearNoteClick}
variant="contained"
color="secondary"
>
clear note
</Button>
</div>
</form>
</>
);
}
import React from "react";
import { makeStyles, Button } from "@material-ui/core";
export default function Notes({ note, draftIdToDelete }) {
const styles = useStyles();
const deleteDraftClick = () => {
draftIdToDelete(note.id);
};
return (
<li className={styles.note}>
<span>{note.userPic}</span>
<div className={styles.noteDetails}>
<span>{note.user}</span>
<span className={styles.time}>{note.time}</span>
<span>{note.note}</span>
</div>
{!note.isFinal ? (
<Button
size="small"
variant="contained"
color="secondary"
type="delete"
className={styles.deleteBtn}
onClick={deleteDraftClick}
>
delete draft
</Button>
) : null}
</li>
);
}
import React from "react";
import AddNote from "./AddNote";
import Notes from "./Notes";
import {
useParams,
Link,
Route,
useRouteMatch,
Switch,
} from "react-router-dom";
import {
makeStyles,
Button,
Typography,
Card,
CardContent,
} from "@material-ui/core";
const useStyles = makeStyles({
card: {
width: "70%",
margin: "auto",
minHeight: 600,
position: "relative",
},
edit: {
backgroundColor: "rgb(63,81,181)",
display: "flex",
justifyContent: "space-between",
padding: 16,
color: "white",
},
btnsContainer: {
margin: "20px 0",
},
saveBtn: {
width: 140,
position: "absolute",
bottom: 10,
right: 10,
},
});
export default function EditPatient({
notes,
handleAddNote,
deleteDraftClick,
saveNotesClick,
finalDraftNotes,
}) {
const styles = useStyles();
const { id } = useParams();
let match = useRouteMatch();
return (
<Card className={styles.card}>
<CardContent>
<div className={styles.edit}>
<Typography variant="h5">Edit Patient</Typography>
<Button color="white" component={Link} to="/">
X
</Button>
</div>
<div className={styles.btnsContainer}>
<Button
color="primary"
component={Link}
to={`${match.url}/details`}
>
Detials
</Button>
<Button
color="primary"
component={Link}
to={`${match.url}/notes`}
>
Notes ({finalDraftNotes.length})
</Button>
</div>
<Switch>
<Route path={`${match.path}/notes`}>
<div>
<AddNote addNote={handleAddNote} />
<ul>
{notes && notes.map((note) => (
<Notes
key={note.id}
note={note}
draftIdToDelete={deleteDraftClick}
/>
))}
</ul>
</div>
</Route>
<Route path={`${match.path}/details`}>
<p>{id}</p>
</Route>
</Switch>
</CardContent>
<Button
component={Link}
to="/"
onClick={saveNotesClick}
className={styles.saveBtn}
variant="contained"
color="primary"
>
save & close
</Button>
</Card>
);
}
你有一个非常复杂的代码，但我试图理解你的观点......最后哦，好吧，所以每个病人都必须有自己的笔记，你必须首先将病人 id 添加到每个笔记对象，这样做是通过获取id 参数（你已经这样做了，并将其传递给 AddNote 组件：
export default function EditPatient({//...})
//.....
const { id } = useParams();
//.....
<AddNote addNote={handleAddNote} idPatient={id} />
现在，转到您的AddNote组件，我们需要将患者 ID 添加到注释对象中，如下所示：
export default function AddNote({ addNote, idPatient }) {
/...
const newNote = {
userPic: <AccountBoxIcon color="primary" fontSize="large" />,
user: "Test User",
time: formatAMPM(new Date()),
note: note,
id: generateId(),
isFinal: false,
idPatient: idPatient //<----add it here
};
现在，剩下要做的是根据 idPatient 过滤每个患者档案的注释，回到 EditPatient 组件：
export default function EditPatient({
//....
const { id } = useParams();
notes = notes.filter((note)=> note.idPatient === id)
PS：当你做得很好时，你让你的代码变得如此复杂和不可读，所以我的建议使用状态管理工具，比如 Context api 或 redux 来让你的代码更干净和易于维护，而不是顶级 useState()
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句