【发布时间】:2021-12-16 10:34:45
【问题描述】:
这是一个带有 mongoose 的 MERN+Redux 项目。有两种模式 "User" 和 "Reader" >.一个特定的'user'创建'Readers'。需要将每个'Reader'与创建的'user'一起渲染。Backend当我通过邮递员检查时,结果还可以。'Reader' 数据可以呈现。但引用的用户对象无法在客户端页面上呈现。需要一种方法来提取客户端上的引用用户对象.
reader.js(模型后端)
const mongoose = require("mongoose");
const { Schema } = mongoose;
const ReaderSchema = new Schema({
readerId: {
type: Number,
required: true,
},
availability: String,
longitude: Number,
latitude: Number,
locationId: Number,
date: { type: Date, default: Date.now },
user: { type: mongoose.Schema.Types.ObjectId, ref: "user" },
});
module.exports = Reader = mongoose.model("reader", ReaderSchema);
user.js(模型后端)
const mongoose = require('mongoose');
const { Schema } = mongoose;
const UserSchema = new Schema({
name: {
type: String,
required: true
},
email: {
type: String,
required: true,
unique: true
},
password: {
type: String,
required: true
},
date: { type: Date, default: Date.now },
});
module.exports = User = mongoose.model('user', UserSchema);
readers.js(路由后端)
// @route GET api/readers
// @desc Get all readers
// @access Private
router.get('/', auth, async (req, res) => {
try {
const readers = await Reader.find().sort({date:-1}).populate('user','-password');
if (!readers) {
return res.status(400).json({ msg: 'There are no readers' });
}
res.json(readers);
} catch (err) {
console.error(err.message);
res.status(500).send('Server Error');
}
});
RederItem.jsx(前端反应)
import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
const ReaderItem = ({
reader: {
readerId,
availability,
longitude,
latitude,
locationId,
date,
user,
//name,
// _id,
//email
user:{ _id, name, email, __v },
},
}) => {
return (
<div className="profile bg-light">
<div>
<h2>
ReaderID:<span>{readerId}</span>
</h2>
<p>
Name:<span>{user.name}</span>
</p>
<p>
Name:<span>{email}</span>
</p> */}
{user.map(u => <div>
<p>{u.name}</p>
<span>{u.email}</span>
<p>{u._id}</p>
</div>)}
<p>
Availability:<span>{availability}</span>
</p>
<p>
location:longitude<span>{longitude}</span>and Latitude
<span>{latitude}</span>
</p>
<p>
Location Code:<span>{locationId}</span>
</p>
<p>
Time:<span>{date}</span>
</p>
</div>
</div>
);
};
export default ReaderItem;
请参考这些图片 successfully GET each reader data along with the created user on postman
【问题讨论】:
标签: node.js reactjs mongodb mongoose redux