无法从React中的表中获取字段

Question

我有两张桌子团队和烘焙师。 Rosters 表包含六个 team_id。团队的名称与呈现给团队表的那些 ID 相关。我需要获取与用户相关的 team_ids，然后需要从与 team_id 对应的 teams 表中获取 team_name。

架构如下。

用户架构

const mongoose = require("mongoose");

const UserSchema = new mongoose.Schema({
    firstName: String,
    lastName: String,
    username: String,
    password: String
});

const User = mongoose.model("User", UserSchema);

module.exports = User;

团队架构

const mongoose = require("mongoose");

const TeamSchema = new mongoose.Schema({
    team_name: String
    
});

const Team = mongoose.model("Team", TeamSchema);

module.exports = Team;

名册架构

const mongoose = require("mongoose");

const TeamRosterSchema = new mongoose.Schema({
    team_id: mongoose.Schema.Types.ObjectId,
    member_id: [mongoose.Schema.Types.ObjectId]
});

const Roster = mongoose.model("Roster", TeamRosterSchema);

module.exports = Roster;

它们的链接方式是userschem 的userid 应该与roboters schema 的member_id 相匹配。然后我们就得到对应的team_id。烘焙师模式的 team_id 应与团队模式的 team_id 匹配，以便我可以获得团队名称。

我正在努力将烘焙商模式的 team_id 与团队模式的 team_id 进行匹配，以便获得团队名称。

这是我的代码

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import { Navbar } from './Navbar';

import { useState, useEffect } from 'react';
import axios from 'axios';

const Home = () => {
  const user_id = localStorage.getItem('loggedInUser');
  
  const [teamNames, setTeamNames] = useState([]); 
  const [userData, setUserData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const userResponse = await axios.get('http://localhost:9000/getUser');
        const userData = userResponse.data;

        const userTeamId = await fetchUserTeamId(user_id);
        **console.log('userTeamId:', userTeamId);**

        setUserData(userData);

        // Fetch and set team names
        const teamNames = await fetchTeamNames(userTeamId);
        setTeamNames(teamNames);
        console.log('teamNames:', teamNames);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, [user_id]);  

  const fetchUserTeamId = async (userId) => {
    try {
      const rostersResponse = await axios.get('http://localhost:9000/getTeamRoster');
      const userTeamId = rostersResponse.data
        .filter((rosters) => rosters.member_id && rosters.member_id.includes(userId))
        .map((rosters) => rosters.team_id); 

      return userTeamId;
      
    } catch (error) {
      console.error('Error fetching user team ID:', error);
      return null;
    }
  };

  const fetchTeamNames = async (teamId) => {
    try {
     
     const teamResponse = await axios.get('http://localhost:9000/getTeam');
     console.log('teamResponse.data:', teamResponse.data);
     
     const teamNames  = teamResponse
     
     .filter((team)=> team.team._id === teamId)
     .map((team)=>team.team_name)
     
      return teamNames;
      
    } catch (error) {
      console.error('Error fetching team names:', error);
      return [];
    }
  };

  return (
    <div className="container mt-5">
      <Navbar />
     

      {user_id && (
        <div>
          <label>Hi &nbsp;</label>
          {userData.map((users) => (
            users._id === user_id && <span key={users._id}>{users.firstName} {users.lastName}</span>
          ))}
          <div>
            <label>Your team name:</label>
            <ul>
              {teamNames.map((teamName, index) => (
                <li key={index}>{teamName}</li>
              ))}
            </ul>
          </div>
        </div>
      )}
    
    </div>
  );
};

export default Home;

使用控制台命令，我看到 console.log('userTeamId:', userTeamId); 返回一个对象 id，例如 ['6539c319a688a6e69c565e3d']

console.log('teamResponse.data:', teamResponse.data); 返回团队表下列出的所有团队。输出是

0: {_id: '651b3a9c6c50475080d85fc1', team_name: 'Sixth', __v: 0}
1: {_id: '651b4dcd4c5c42a0afd9cdaa', team_name: 'Seventh', __v: 0}
2: {_id: '6539c319a688a6e69c565e3d', team_name: 'First', __v: 0}
3: {_id: '6539c335a688a6e69c565e45', team_name: 'Third', __v: 0}
4: {_id: '6539d2c675f5301e326318ea', team_name: 'Second', __v: 0}
length: 5
[[Prototype]]: Array(0)

但是，teamNames 返回一个空数组

teamNames: []length: 0[[Prototype]]: Array(0)

还有另一个错误

console  Home.js:80  Error fetching team names: TypeError: teamResponse.filter is not a function
    at fetchTeamNames (Home.js:72:1)
    at async fetchData (Home.js:40:1)

代码上的所有 http:// 链接都运行良好。

Answer 1

从你的 console.log('teamResponse.data:', teamResponse.data) 看来 teamResponse.data 是一个数组，所以你应该使用 teamResponse.data.filter 而不是仅仅 teamResponse.filter。

const teamNames = teamResponse.data
 .filter((team) => team._id === teamId) // not team.team._id === teamId
 .map((team) => team.team_name)

在 fetchTeamNames 函数中，您尝试根据团队 ID 过滤团队，但花名册架构中的团队 ID 存储为 ObjectId。因此，您需要先将从 fetchUserTeamId 获取的团队 ID 转换为 MongoDB ObjectId，然后再在过滤器中使用它。

const userTeamId = rostersResponse.data
 .filter((rosters) => rosters.member_id && rosters.member_id.includes(userId))
 .map((rosters) => rosters.team_id.toHexString()) // here convert ObjectId to string 

同样在 JSX 中，您正在映射 teamNames，但如果它是空数组，则映射将不会呈现任何内容。您可能需要添加一个条件，以便在没有团队名称时显示一条消息。

<ul>
  {teamNames.length > 0 ? (
    teamNames.map((teamName, index) => (
      <li key={index}>{teamName}</li>
    ))
  ) : (
    <li>No team found</li>
  )}
</ul>