تعديل البيانات الشخصية مع عرض البيانات القديمة

لحل المشكلة يمكنك استخدام useEffect ، حيث نستعمله عندما نريد إجراء تعديل على حالة ال component بعد ال render و هذا الكود بعد التحديث:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import HeaderProfile from './HeaderProfile';
import Alert from './Alert';

function PhotoProfile({ profile }) {
  const user = JSON.parse(localStorage.getItem("user"));
  let profilePhoto = profile?.avatar ? require(`../../assets/profile/${profile.avatar}`) : avatar;
  const [profileAvatar, setProfileAvatar] = useState(null);
  const [profileImage, setProfileImage] = useState(profilePhoto);
  const [data, setData] = useState([]);
  const [name, setName] = useState(profile.name || "");
  const [bio, setBio] = useState(profile.bio || "");
  const [status, setStatus] = useState(profile.status || "");
  const [error, setError] = useState("");
  const navigate = useNavigate();

  useEffect(() => {
    // تحديث معلومات البروفايل
    let profilePhoto = profile?.avatar ? require(`../../assets/profile/${profile.avatar}`) : avatar;
    setProfileImage(profilePhoto);
    setName(profile.name || "");
    setBio(profile.bio || "");
    setStatus(profile.status || "");
  }, [profile]);

  const handleFileChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setProfileImage(URL.createObjectURL(e.target.files[0]));
      setProfileAvatar(e.target.files[0]);
    }
  };

  const handleSave = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('name', name);
    formData.append('bio', bio);
    formData.append('status', status);
    if (profileAvatar) {
      formData.append('avatar', profileAvatar, profileAvatar?.name);
    }
    axios
      .post("/api/users/profile", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          "x-auth-token": user.data?.token,
        },
      })
      .then((res) => {
        setData(res.data);
        navigate('/');
      })
      .catch((error) => setError(error.response.data.msg));
  };

  return (
    <div className="photo-profile">
      <HeaderProfile
        title="Public profile"
        paragraphe="Add information about yourself."
      />
      <div className="photo-profile-img">
        <img alt="" src={profileImage} />
      </div>
      <form
        encType="multipart/form-data"
        className='form-container'
        onSubmit={handleSave}
      >
        {error && <Alert error={error} />}
        <input
          className="photo-profile-input"
          type="file"
          name="avatar"
          accept="image/*"
          onChange={handleFileChange}
        />
        <input
          type="text"
          className="profile-iput-info"
          placeholder="name"
          value={name}
          name="name"
          onChange={(e) => setName(e.target.value)}
          required
        />

        <input
          type="text"
          className="profile-iput-info"
          placeholder="bio"
          value={bio}
          name="bio"
          onChange={(e) => setBio(e.target.value)}
          required
        />

        <input
          type="text"
          className="profile-iput-info"
          placeholder="status"
          value={status}
          name="status"
          onChange={(e) => setStatus(e.target.value)}
          required
        />

        <button className="submit" type="submit">
          Save
        </button>
      </form>
    </div>
  );
}

export default PhotoProfile;

يمكنك الإطلاع اكثر على هذه العناصر من خلال المقالات التالية: