كيف أرسل البيانات إلى الخادم باستعمال axios

محمود سعداوي2 · 1 أكتوبر 2023

السلام عليكم.

لإرسال بيانات إلى الخادم قمت بالكود التالي

const navigate = useNavigate()
  const [error, setError] = useState('')
  const [changePassward, setChangePassward] = useState({
    password: '',
    newPassword: ''
  })

  const { password, newPassword } = changePassward

  const onChange = (e) => {
      setChangePassward({...changePassward, [e.target.name]: e.target.value})
  }
  console.log(newPassword)

  const onSubmit = (e) => {
    e.preventDefault();

    const user = JSON.parse(localStorage.getItem('user'))

    const headers = new Headers({
      'Content-Type': 'application/json',
      'x-auth-token': user?.data?.token
    });

    const requestOptions = {
      method: 'POST', // or 'POST', 'PUT', 'DELETE', etc.
      headers: headers
    };

    fetch('/api/auth/change_password', requestOptions)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

لكن ظهرت لي رسالة خطأ

20.JPG.558fa42c8631038bdc51abe563912876.JPG

هذا الكود في server

const changePassword = async(req,res) => {
    const errors = validationResult(req)
    if (!errors.isEmpty()) {
        return res.status(400).json({errors: errors.array()})
    }
    try {
        const { password, newPassword } = req.body;
        const id = new mongoose.Types.ObjectId(req.user);
        const current_user = await User.findOne({ _id: id });
        
        // Check if password is wrong then create error.
        const matchPassword = await bcrypt.compare(
          password,
          current_user.password
        );
        if (!matchPassword) {
            return res.status(401).send({msg: "كلمة المرور خاطئة"})
        }

        // Update password.
        const salt = await bcrypt.genSalt(10);
        const hashNewPassword = await bcrypt.hash(newPassword, salt)
        current_user.password = hashNewPassword;

        await current_user.save()

        res.send(res.json({
            success: true,
            data: current_user
        }))
        
    } catch (error) {
        res.status(500).send({msg: error.message}); 
    }
}

// /api/auth/change_password
router.post(
  "/change_password",
  [
    check("newPassword","required field")
    .not()
    .isEmpty(),
  ],
  protect,
  changePassword
);

شكرا للمساعدة

Mohamed Selem2 · 2 أكتوبر 2023

السلام عليكم

سأحاول تقديم تصحيح للكود الذي قدمته. يبدو أن الخطأ الرئيسي في الكود هو عدم إرسال بيانات الحقلين `password` و `newPassword` بشكل صحيح في الRequest .

اليك تصحيح الكود:

import React, { useState } from 'react';

function ChangePasswordForm() {
  const [error, setError] = useState('');
  const [changePassword, setChangePassword] = useState({
    password: '',
    newPassword: ''
  });

  const { password, newPassword } = changePassword;

  const onChange = (e) => {
    setChangePassword({ ...changePassword, [e.target.name]: e.target.value });
  };

  const onSubmit = async (e) => {
    e.preventDefault();

    const user = JSON.parse(localStorage.getItem('user'));

    const requestOptions = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-auth-token': user?.data?.token
      },
      body: JSON.stringify(changePassword) // Send the changePassword object
    };

    try {
      const response = await fetch('/api/auth/change_password', requestOptions);
      if (!response.ok) {
        throw new Error('Failed to change password');
      }
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error:', error.message);
      setError('حدث خطأ أثناء تغيير كلمة المرور');
    }
  };

  return (
    <div>
      {error && <p>{error}</p>}
      <form onSubmit={onSubmit}>
        <label>
          كلمة المرور الحالية:
          <input
            type="password"
            name="password"
            value={password}
            onChange={onChange}
          />
        </label>
        <br />
        <label>
          كلمة المرور الجديدة:
          <input
            type="password"
            name="newPassword"
            value={newPassword}
            onChange={onChange}
          />
        </label>
        <br />
        <button type="submit">تغيير كلمة المرور</button>
      </form>
    </div>
  );
}

export default ChangePasswordForm;

يجب عليك تضمين هذا الكود ضمن أكواد React الخاصة بك. سيتم إرسال الاوبجيكت`changePassword` بشكل صحيح في الRequest إلى السيرفر. بعد ذلك، يمكنك معالجة الاستجابة والأخطاء بشكل مناسب في جزء السيرفر.

كيف أرسل البيانات إلى الخادم باستعمال axios

السؤال

محمود سعداوي2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Mohamed Selem2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية