javascript - How to push element to the last place in the array
问题描述
So i have the data of patients in the database(mongodb) and in the frontend to see the whole list of patients i map through all the patients. I've added the the boolean type to patient if the patient is archived or not. If the patient is archived it is not possible to click on it and to see the data informations. How to make that if the patient is archived it will be displayed at the bottom of the list ? Should I use push function?
Here is the code:
const PatientListScreen = ({ history, match }) => {
const dispatch = useDispatch();
const patientList = useSelector((state) => state.patientList);
const { loading, error, patients } = patientList;
const userLogin = useSelector((state) => state.userLogin);
const { userInfo } = userLogin;
const patientDelete = useSelector((state) => state.patientDelete);
const {
loading: loadingDelete,
error: errorDelete,
success: successDelete,
} = patientDelete;
const patientCreate = useSelector((state) => state.patientCreate);
const {
loading: loadingCreate,
error: errorCreate,
success: successCreate,
patient: createdPatient,
} = patientCreate;
useEffect(() => {
dispatch({ type: PATIENT_CREATE_RESET });
if (!userInfo.isAdmin) {
history.push("/login");
}
if (successCreate) {
history.push(`/admin/patient/${createdPatient._id}/edit`);
} else {
dispatch(listPatients());
}
}, [
dispatch,
history,
userInfo,
successDelete,
successCreate,
createdPatient,
]);
const deleteHandler = (id) => {
if (window.confirm("Are you sure")) {
dispatch(deletePatient(id));
}
};
const createPatientHandler = () => {
dispatch(createPatient());
};
return (
<>
<Row className="align-items-center">
<Col>
<h1>Patients List</h1>
</Col>
<Col className="text-right">
<Button className="my-3" onClick={createPatientHandler}>
<i className="fas fa-plus"></i> Create Patient
</Button>
</Col>
</Row>
{loadingDelete && <Loader />}
{errorDelete && <Message variant="danger">{errorDelete}</Message>}
{loadingCreate && <Loader />}
{errorCreate && <Message variant="danger">{errorCreate}</Message>}
{loading ? (
<Loader />
) : error ? (
<Message variant="danger">{error}</Message>
) : (
<ListGroup>
<ListGroupItem className="border-dark">
{patients.map((patient) => (
<Row key={patient._id} className="align-items-center">
<Col>
<Card className="my-3 p-3 border-dark rounded patient-item">
<Link to={`/admin/patientlist/${patient._id}`}>
<Row>
<Col
md="auto"
as="h5"
className="text-center patient-item-Col"
>
Name: {patient.name}
</Col>
<Col as="h5" className="text-center patient-item-Col">
Age: {patient.age}
</Col>
<Col as="h5" className="text-center patient-item-Col">
Sex: {patient.sex}
</Col>
<Col
md="auto"
as="h5"
className="text-center patient-item-Col"
>
Birth: {patient.birth}
</Col>
</Row>
</Link>
</Card>
</Col>
<Col md="auto" className="text-right">
<LinkContainer to={`/admin/patient/${patient._id}/edit`}>
<Button id="button" variant="secondary" className="btn-sm">
<i className="fas fa-edit"></i>
</Button>
</LinkContainer>
<Button
variant="danger"
className="btn-sm"
onClick={() => deleteHandler(patient._id)}
>
<i className="fas fa-trash"></i>
</Button>
</Col>
</Row>
))}
</ListGroupItem>
</ListGroup>
)}
</>
);
};
export default PatientListScreen;
解决方案
this example use the reverse()
function for sort element element from the bottom(last) to Top(first)
NameArray.reverse().map((text, index) => (
<span key={index}>
{text.name}
</span>
));
推荐阅读
- excel - 基于两个数字和一个文本的最大值
- php - 使用 Guzzle 客户端 API 和 Ajax 在 laravel 中上传多个图像和视频
- class - 链表中的下一个对象如何工作?它如何使另一个类对象指向下一个地址?
- python-2.7 - Tkinter 提取标签以创建图像
- java - java 8 api 流的问题。需要过滤不存在的键
- javascript - 为什么我的 ESLinter 在保存时没有格式化?
- ios - 横幅广告展示位置 - SwiftUI TabView
- c++ - 长整数与 C++ 中的字符串?
- python - 如何计算 exp(a*x**2+b*x+c) 的积分?
- python - 在 Python 3 中将字节数组转换为浮点数组