Блог

Этот проект представляет собой приложение для стека MERN с использованием Мангуста и Axios.

В настоящее время этот код отображает все, что я хочу, но когда я проверяю консоль, я вижу это сообщение об ошибке 6 раз для строк 79 и 97 в разделе сообщения пользователя:

Ошибка типа: Не удается прочитать свойства неопределенного (чтение «creatureId»)

Мой файл App.jsx от клиента:

 import { useEffect, useState } from "react"; import './App.scss'; import Userfront from "@userfront/react"; import { Navigate } from "react-router-dom"; import { getUsers, addUser, updateUser } from './services/userServices'; import { getCreatures } from './services/creatureServices';  // initialize Userfront Userfront.init("rbvqd5nd");  // initialize logout button const LogoutButton = Userfront.build({ toolId: "rodmkm" });  // main app component function App() {  // sets user and userfront id state  const [player, setPlayer] = useState([{ _id: 0, userfrontId: 0, name: "", avatarPath: "", experience: 0, creatureId: 0 }]);  const [userfrontId, setUserfrontId] = useState(0);  // sets player creature state  const [playerCreature, setPlayerCreature] = useState([{ _id: 0, name: "", imgPath: "" }]);   // calls authentication on load  useEffect(() =gt; {  // checks for userfront authentication and redirects user if not authenticated  const checkAuth = () =gt; {  if (!Userfront.accessToken()) {  return (  lt;Navigate  to={{  pathname: "/",  state: { from: window.location },  }}  /gt;  );  }  }  checkAuth();  }, []);   useEffect(() =gt; {  // retrieves user data, generates new user if needed, and updates user state on load  const loadAsyncDataUser = async () =gt; {  try {  const { data } = await getUsers();  setUserfrontId(Userfront.user.userId);  const userData = data.filter(user =gt; user.userfrontId === userfrontId);   try {  if (userfrontId !== userData amp;amp; userfrontId !== 0) {  const newUser = {  userfrontId: userfrontId,  name: Userfront.user.name,  avatarPath: null,  experience: 0,  creatureId: null,  }  await addUser(newUser);  }  } catch (error) {  console.log(error);  }   const newUserData = data.filter(user =gt; user.userfrontId === userfrontId);  setPlayer(newUserData);  } catch (error) {  console.log(error);  }  }  loadAsyncDataUser();  // loads player creature data  const loadAsyncDataPlayer = async () =gt; {  try {  const { data } = await getCreatures();  const playerCreatureData = data.filter(creature =gt; creature._id === player[0].creatureId);  setPlayerCreature(playerCreatureData);  }  catch (error) {  console.log(error);  }  }  loadAsyncDataPlayer();  // generates random creature, updates player creature in database, and then updates player creature state  const checkAsyncDataCreature = async () =gt; {  try {  if (player[0].creatureId === null) {  const { data } = await getCreatures();  const randomCreature = data[Math.floor(Math.random() * data.length)]._id;  updateUser(player[0]._id, { creatureId: randomCreature });  setPlayerCreature(randomCreature);  }  }  catch (error) {  console.log(error);  }  }  checkAsyncDataCreature();  }, [player, userfrontId]);   return (  lt;gt;  {/* nav */}  lt;divgt;  lt;LogoutButton /gt;  lt;/divgt;   {/* user details */}  lt;divgt;  {player.map((user) =gt; (  lt;div  key={user._id}  gt;  {user.name}  lt;/divgt;  ))}  lt;/divgt;   {/* player details */}  lt;divgt;  {playerCreature.map((creature) =gt; (  lt;div  key={creature._id}  gt;  lt;img src={creature.imgPath} alt={creature.name} /gt;  {creature.name}  lt;/divgt;  ))}  lt;/divgt;  lt;/gt;  ); }  export default App;  

Мои схемы с сервера: models/creature.js:

 const mongoose = require("mongoose"); const Schema = mongoose.Schema;  const creatureSchema = new Schema({  name: {  type: String,  required: true,  },  imgPath: {   type: String,  required: true,  } });  module.exports = mongoose.model("creature", creatureSchema);  

models/user.js:

 const mongoose = require("mongoose"); const Schema = mongoose.Schema;  const userSchema = new Schema({  userfrontId: {  type: Number,  },  name: {  type: String,  },  avatarPath: {  type: String,  },  experience: {  type: Number,  },  creatureId: {  type: Schema.Types.ObjectId,  } });  module.exports = mongoose.model("user", userSchema);  

Я пробовал использовать различные методы, такие как функциональный рендеринг, использование констант для косвенного доступа к государственной собственности и т. Д., Но безуспешно.

Проверьте , setPlayer вызывается ли, который позже устанавливает player , а затем должен предоставить объект, в player[0] котором есть свойство creatureId , как указано в ошибке. Вы можете проверить это лучше всего с помощью инструментов разработки React в качестве расширения браузера. Я думаю, что игрок не найден или не назначен правильно, и поэтому происходит эта ошибка.