【问题标题】:Need to render a document data with mongoose referenced document data on react.js+redux需要在 react.js+redux 上用 mongoose 引用的文档数据渲染一个文档数据
【发布时间】:2021-12-16 10:34:45
【问题描述】:

这是一个带有 mongooseMERN+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

Error when i render the referenced user object on client

【问题讨论】:

    标签: node.js reactjs mongodb mongoose redux


    【解决方案1】:

    像这样将date添加到ReaderItem中的用户

    const ReaderItem = ({
      reader: {
        readerId,
        availability,
        longitude,
        latitude,
        locationId,
        date,
        user,
        //name,
        // _id,
         //email
         user:{  _id, name, date, email, __v },
      },
      
     
    })
    

    【讨论】:

    • 我认为无论我放在那里还是放在这里,日期都可以。问题是引用的用户对象。用户对象的任何属性都无法打印。每当我只放“用户”而不是“ “用户:{.........}”它只呈现用户ID(_id),但我需要获取用户的呈现名称和电子邮件。我无法将用户对象中用户的任何属性获取到客户端。但是邮递员按照我的需要去做。
    • 你的后端根据邮递员正确发送数据,
    • yeah.backend 没问题。引用的文档很头疼。我无法映射或提取。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-03-30
    • 2018-02-13
    • 1970-01-01
    • 1970-01-01
    • 2023-01-03
    • 2016-04-13
    • 1970-01-01
    相关资源
    最近更新 更多