كيف أرسل البيانات إلى الخادم باستعمال 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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية