كيفية علاج الخطأ GET /questions 304 فى Node js

Ahmed Sawy · 11 مايو 2021

هذا الخطأ بحثت عنه واكتشفت انه بسبب ان الاستجابة غير معدلة

Not Modified response code
كيف أجعل هذا الاى بى أى معدل لكى اتجنب هذا الخطأ

// model


const mongoose = require("mongoose");

const questSchema = mongoose.Schema({
  name: String,
  answers: [
    {
      ansName: String,
      correct: Boolean,
    },
  ],
});

module.exports.Quest = mongoose.model("Quest", questSchema);

// router


const express = require("express");
const router = express.Router();
const { Quest } = require("../model/question");

router.get("/", async (req, res) => {
  const questions = await Quest.find();
  if (!questions) res.send("Not Found");
  res.send(questions);
});

router.post("/", async (req, res) => {
  let newQuest = new Quest({
    name: req.body.name,
    answers: req.body.answers,
  });
  newQuest = await newQuest.save();

  res.send(newQuest);
});

module.exports = router;

// index.js


const questRouter = require("./router/questions");

app.use(express.json());
app.use(morgan("tiny"));
app.use("/questions", questRouter);

ان لم يكن الخطأ هنا فى الباك اند فهل من الممكن ان يكون فى الفرونت اند ..
انا استخدمت اكسيوس

  const getQuestions = () => {
    axios
      .get('http://10.0.2.2:3000/questions')
      .then(res => setQuestions(res.data))
      .then(console.log(questions))
      .catch(err => console.log(err));
  };

  useEffect(() => {
    getQuestions();
  }, []);

ومرة الداتا تطبع ويتم جلبها ومرة لا

عبدالله عبدالرحمن11 · 11 مايو 2021

هذا ليس خطأ وإنما رقم حالة الاستجابة Status Code ولكل رقم معنى معين

فالرقم 304 يشير الى Not Modified يعني ليس هناك جديد في الإستجابة لأنها لازلت كما هي سابقا

لذلك إذا أردت أن لا يظهر لك هذا الرقم فيجب أن تكون الإستجابة جديدة وليست مثل سابقتها أما إذا أردت عمل ما يسمى بال Hard Reload في المتصفح فيمكنك الضغط على

ctrl + shift + R

في كود ال Frontend

  const getQuestions = () => {
    axios
      .get('http://10.0.2.2:3000/questions')
      .then(res => setQuestions(res.data))
      .then(console.log(questions))
      .catch(err => console.log(err));
  };

  useEffect(() => {
    getQuestions();
  }, []);

انت تقوم بعمل طلب للحصول على الأسئلة فإذا قمت بعمل طلب لأول مرة فستحصل على الأجوبة وعلى رقم الحالة 200 يعني تم بنجاح

وإذا أردت عمل طلب مرة أخرى ولكن الأسئلة لم تتغير أبداً فستحصل على رقم الحالة 304 ويعني أن الإستجابة لم تتغير مازالت مثل سابقتها

Ahmed Sawy · 11 مايو 2021

بتاريخ 3 دقائق مضت قال عبدالمجيد الجرادي:

هذا ليس خطأ وإنما رقم حالة الاستجابة Status Code ولكل رقم معنى معين

فالرقم 304 يشير الى Not Modified يعني ليس هناك جديد في الإستجابة لأنها لازلت كما هي سابقا

لذلك إذا أردت أن لا يظهر لك هذا الرقم فيجب أن تكون الإستجابة جديدة وليست مثل سابقتها أما إذا أردت عمل ما يسمى بال Hard Reload في المتصفح فيمكنك الضغط على

ctrl + shift + R

لكنى للأسف هذا لاى بى اى يعمل للمرة الاولى فقط وبعد ذلك يظهر لى هذا الايرور عندما اعمل run للتطبيق على الهاتف ..
undefined is not an object (evaluating 'questions[index].name')

هذا الخطأ فوق يظهر بسبب ان الداتا تظهر وتختفى .. حيث اننى اطبعها فى الكونسول ومرة تظهر الداتا ومرة اخرى تكون [ ] عبارة عن مصفوفة فارعة

لذلك انا اريد علاجه

عبدالله عبدالرحمن11 · 11 مايو 2021

بتاريخ 5 دقائق مضت قال Ahmed Sawy:

لكنى للأسف هذا لاى بى اى يعمل للمرة الاولى فقط وبعد ذلك يظهر لى هذا الايرور عندما اعمل run للتطبيق على الهاتف ..
undefined is not an object (evaluating 'questions[index].name')

هذا الخطأ فوق يظهر بسبب ان الداتا تظهر وتختفى .. حيث اننى اطبعها فى الكونسول ومرة تظهر الداتا ومرة اخرى تكون [ ] عبارة عن مصفوفة فارعة

لذلك انا اريد علاجه

يجب عليك مراجعة الكود لأن المشكلة أنك تقوم بإستدعاء name من questions[index] وهي undefined يعني غير موجودة

Ahmed Sawy · 11 مايو 2021

بتاريخ الآن قال عبدالمجيد الجرادي:

يجب عليك مراجعة الكود لأن المشكلة أنك تقوم بإستدعاء name من questions[index] وهي undefined يعني غير موجودة

انا اعلم .. undefined يعني غير موجودة وهذا بسبب ان get request احيانا يظهر الداتا ويعمل التطبيق بشكل صحيح .. واحيانا الداتا لا تظهر فيعطينى undefined يعني غير موجودة.

import axios from 'axios';
import React, {useEffect, useState} from 'react';
import {Text, View, Button} from 'react-native';


export default function Pagination() {
  const [num, setNum] = useState(0);
  const [questions, setQuestions] = useState([]);
  const [index, setIndex] = useState(0);
  const [Correct, setCorrect] = useState(false);
  const [Done, setDone] = useState(false);
  const [CorrectMessage, setInCorrectMessage] = useState(false);
  const [Answer, setAnswer] = useState(1);
  const [IsSelected, setIsSelected] = useState(0);

  const getQuestions = () => {
    axios
      .get('http://10.0.2.2:3000/questions')
      .then(res => setQuestions(res.data))
      .then(console.log(questions))
      .catch(err => console.log(err));
  };

  useEffect(() => {
    getQuestions();
  }, []);

  const handleSelect = answerParam => {
    setCorrect(true);
    setAnswer(answerParam);
    setInCorrectMessage(false);
  };

  const handelSubmit = () => {
    if (questions[index].answers[Answer].correct === Correct) {
      setNum(num + 1);
      setIndex(index + 1);
      setIsSelected(0);
    } else if ((index = questions.length - 1)) {
      setDone(true);
    } else {
      setInCorrectMessage(true);
      console.log('Not Correct');
    }
  };

  return (
    <View>
       <Text>{questions[index].name}</Text>
      {num === index ? (
        <Text>{questions[index].answers[0].ansName}</Text>
      ) : null}
      {num === index ? (
        <Text>{questions[index].answers[1].ansName}</Text>
      ) : null}
      {num === index ? (
        <Text>{questions[index].answers[2].ansName}</Text>
      ) : null} 

      {Done ? <Text>Test is Done</Text> : null}


      {CorrectMessage === true ? (
        <Text style={{color: 'red'}}>Wrong Answer</Text>
      ) : null}

      <Button
        color={IsSelected === 1 ? 'green' : 'blue'}
        title="A"
        onPress={() => {
          setIsSelected(1);
          handleSelect(0);
        }}
      />
      <Button
        color={IsSelected === 2 ? 'green' : 'blue'}
        title="B"
        onPress={() => {
          setIsSelected(2);
          handleSelect(1);
        }}
      />
      <Button
        color={IsSelected === 3 ? 'green' : 'blue'}
        title="C"
        onPress={() => {
          setIsSelected(3);
          handleSelect(2);
        }}
      />

      <Button title=">>" onPress={handelSubmit} />
    </View>
  );
}

Abdullah Muhammad · 11 مايو 2021

هذه المشكله خاصة بالكاش ولحلها يمكنك إستخدام إحدى الطريقتين التاليتين

app.get('/*', function(req, res, next){ 
  res.setHeader('Last-Modified', (new Date()).toUTCString());
  next(); 
});

او

app.disable('etag');

وذلك قبل إستخدامك ل

app.use("/questions", questRouter);

Ahmed Sawy · 11 مايو 2021

بتاريخ 7 دقائق مضت قال Abdullah Muhammad:
هذه المشكله خاصة بالكاش ولحلها يمكنك إستخدام إحدى الطريقتين التاليتين
app.get('/*', function(req, res, next){ 
  res.setHeader('Last-Modified', (new Date()).toUTCString());
  next(); 
});
او
app.disable('etag');
وذلك قبل إستخدامك ل
app.use("/questions", questRouter);

جربت الطريقتين ولم تنفع للأسف ..
الاولى فعلت هكذا

router.get("/*", async (req, res, next) => {
  const questions = await Quest.find();
  if (!questions) res.send("Not Found");
  res.send(questions);
  res.setHeader("Last-Modified", new Date().toUTCString());
  next();
});

وجلب لى هذا الخطأ

الثانية نفعت وتم تغيير الكود من 304 الى 200 ولكن لم تحل المشكلة فى الفرونت اند .. هل لك ان تلقى نظرة على الفرونت اند ربما يتكون المشكلة هناك

Abdullah Muhammad · 11 مايو 2021

بتاريخ 7 دقائق مضت قال Ahmed Sawy:
جربت الطريقتين ولم تنفع للأسف ..
الاولى فعلت هكذا
router.get("/*", async (req, res, next) => {
  const questions = await Quest.find();
  if (!questions) res.send("Not Found");
  res.send(questions);
  res.setHeader("Last-Modified", new Date().toUTCString());
  next();
});
وجلب لى هذا الخطأ

الثانية نفعت وتم تغيير الكود من 304 الى 200 ولكن لم تحل المشكلة فى الفرونت اند .. هل لك ان تلقى نظرة على الفرونت اند ربما يتكون المشكلة هناك

تنفيذك للطريقة الأولى خاطئه فكان لابد أن يكون الكود النهائي بالشكل التالي في ملف index.js

// index.js


const questRouter = require("./router/questions");

app.use(express.json());
app.use(morgan("tiny"));
app.get('/*', function(req, res, next){ 
  res.setHeader('Last-Modified', (new Date()).toUTCString());
  next(); 
});
app.use("/questions", questRouter);

بالنسبة للفرونت إند فلديك خطأ بسيط هنا

<Text>{questions[index].name}</Text>

حيث أنك تقوم بعرض الإسم الخاص بالسؤال صاحب index صفر
ولكن في أول مرة يعرض فيها المكون يكون
index = 0

questions = []
وبالتالي لايوجد شئ في الاندكس صفر ويكون الناتج undefined ويظهر لك الخطأ

Ahmed Sawy · 11 مايو 2021

بتاريخ 1 دقيقة مضت قال Abdullah Muhammad:
تنفيذك للطريقة الأولى خاطئه فكان لابد أن يكون الكود النهائي بالشكل التالي في ملف index.js
// index.js


const questRouter = require("./router/questions");

app.use(express.json());
app.use(morgan("tiny"));
app.get('/*', function(req, res, next){ 
  res.setHeader('Last-Modified', (new Date()).toUTCString());
  next(); 
});
app.use("/questions", questRouter);
بالنسبة للفرونت إند فلديك خطأ بسيط هنا
<Text>{questions[index].name}</Text>
حيث أنك تقوم بعرض الإسم الخاص بالسؤال صاحب index صفر
ولكن في أول مرة يعرض فيها المكون يكون
index = 0

questions = []
وبالتالي لايوجد شئ في الاندكس صفر ويكون الناتج undefined ويظهر لك الخطأ

وما فى رايك علاج هذه المشكلة ؟؟

بتاريخ 1 دقيقة مضت قال Abdullah Muhammad:
تنفيذك للطريقة الأولى خاطئه فكان لابد أن يكون الكود النهائي بالشكل التالي في ملف index.js
// index.js


const questRouter = require("./router/questions");

app.use(express.json());
app.use(morgan("tiny"));
app.get('/*', function(req, res, next){ 
  res.setHeader('Last-Modified', (new Date()).toUTCString());
  next(); 
});
app.use("/questions", questRouter);
بالنسبة للفرونت إند فلديك خطأ بسيط هنا
<Text>{questions[index].name}</Text>
حيث أنك تقوم بعرض الإسم الخاص بالسؤال صاحب index صفر
ولكن في أول مرة يعرض فيها المكون يكون
index = 0

questions = []
وبالتالي لايوجد شئ في الاندكس صفر ويكون الناتج undefined ويظهر لك الخطأ

وما هو حل هذه المشكلة الخاصة بالفرونت اند ؟؟

Abdullah Muhammad · 11 مايو 2021

يمكنك تعديل الكود الخاص ب return كالتالي

  return (
    <View>
    {questions.length > 0 &&  <Text>{questions[index].name}</Text>
      {num === index ? (
        <Text>{questions[index].answers[0].ansName}</Text>
      ) : null}
      {num === index ? (
        <Text>{questions[index].answers[1].ansName}</Text>
      ) : null}
      {num === index ? (
        <Text>{questions[index].answers[2].ansName}</Text>
      ) : null} 

      {Done ? <Text>Test is Done</Text> : null}


      {CorrectMessage === true ? (
        <Text style={{color: 'red'}}>Wrong Answer</Text>
      ) : null}

      <Button
        color={IsSelected === 1 ? 'green' : 'blue'}
        title="A"
        onPress={() => {
          setIsSelected(1);
          handleSelect(0);
        }}
      />
      <Button
        color={IsSelected === 2 ? 'green' : 'blue'}
        title="B"
        onPress={() => {
          setIsSelected(2);
          handleSelect(1);
        }}
      />
      <Button
        color={IsSelected === 3 ? 'green' : 'blue'}
        title="C"
        onPress={() => {
          setIsSelected(3);
          handleSelect(2);
        }}
      />

      <Button title=">>" onPress={handelSubmit} /> }
    </View>
  );

Ahmed Sawy · 11 مايو 2021

بتاريخ 9 دقائق مضت قال Abdullah Muhammad:

يمكنك تعديل الكود الخاص ب return كالتالي


  return (
    <View>
    {questions.length > 1 &&  <Text>{questions[index].name}</Text>
      {num === index ? (
        <Text>{questions[index].answers[0].ansName}</Text>
      ) : null}
      {num === index ? (
        <Text>{questions[index].answers[1].ansName}</Text>
      ) : null}
      {num === index ? (
        <Text>{questions[index].answers[2].ansName}</Text>
      ) : null} 

      {Done ? <Text>Test is Done</Text> : null}


      {CorrectMessage === true ? (
        <Text style={{color: 'red'}}>Wrong Answer</Text>
      ) : null}

      <Button
        color={IsSelected === 1 ? 'green' : 'blue'}
        title="A"
        onPress={() => {
          setIsSelected(1);
          handleSelect(0);
        }}
      />
      <Button
        color={IsSelected === 2 ? 'green' : 'blue'}
        title="B"
        onPress={() => {
          setIsSelected(2);
          handleSelect(1);
        }}
      />
      <Button
        color={IsSelected === 3 ? 'green' : 'blue'}
        title="C"
        onPress={() => {
          setIsSelected(3);
          handleSelect(2);
        }}
      />

      <Button title=">>" onPress={handelSubmit} /> }
    </View>
  );

نفعت اخى شكرا لك .. فيها سينتاك ايرور لكنى عالجته ونفقت الحمد لله .. شكرا

كيفية علاج الخطأ GET /questions 304 فى Node js

السؤال

Ahmed Sawy

10 أجوبة على هذا السؤال

Recommended Posts

عبدالله عبدالرحمن11

Ahmed Sawy

عبدالله عبدالرحمن11

Ahmed Sawy

Abdullah Muhammad

Ahmed Sawy

Abdullah Muhammad

Ahmed Sawy

Abdullah Muhammad

Ahmed Sawy

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية