حالة عنصر عند تحديث الصفحة

محمود سعداوي2 · 15 نوفمبر 2023

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

في الكود التالي المتغير buttonColor حالته دائما true عند تحديث الصفحة

الكود

function ImageCard(props) {
  const navigate = useNavigate();
  const [error, setError] = useState("");
  const [like, setLike] = useState([]);
  const {
    photo,
    title,
    author,
    createdAt,
    avatar,
    imageId,
    likes,
    edit_remove,
    handleRemove,
    userId,
  } = props;
  const user = JSON.parse(localStorage.getItem("user"));
  const imgSrc = photo && require(`../../assets/images/${photo}`);
  const avatarSrc = avatar
    ? require(`../../assets/profile/${avatar}`)
    : defaultUser;
  const [numLikes, setNumLikes] = useState(likes?.length);
  const [buttonColor, setButtonColor] = useState(likes.some((item) => item.user === userId));

  /**
   * HandleLike An Image
   */
  const handleLikeImage = async (id) => {
    if (!user) {
      navigate("/login");
      return;
    }

    await axios
      .put(`/api/images/like/${id}`, like, {
        headers: {
          "Content-Type": "application/json",
          "x-auth-token": user.data.token,
        },
      })
      .then((res) => {
        setLike(res.data);
        setNumLikes(res.data.likes.length);
        setButtonColor(!buttonColor);
      })
      .catch((err) => {
        setError(err.response.data.msg);
        setTimeout(() => {
          setError(null);
        }, 1500);
      });
  };
  console.log(buttonColor)
  return (
    <div className="menu">
      {edit_remove ? (
        <>
          <div className="delete change" onClick={() => handleRemove(imageId)}>
            <i className="fa-solid fa-trash"></i>
          </div>
          <div className="edit change">
            <Link to={`/edit-photo/${imageId}`}>
              <i className="fa-solid fa-pen-to-square"></i>
            </Link>
          </div>
        </>
      ) : (
        ""
      )}
      <div className="menu-img">
        <img src={imgSrc} alt={`${title}`} className="img" />
        <span className="read-more">
          <Link to={`/${imageId}`}>
            <i className="fa-regular fa-square-plus"></i>
          </Link>
        </span>
      </div>
      <div className="menu-description">
        <img src={avatarSrc} alt="avatar" className="avatar" />
        <div className="menu-info">
          <h3 className="title">{title}</h3>
          <p className="date">
            created by: <span>{author}</span> at:
            <span>{moment(createdAt).format("DD-MM-YYYY")}</span>
          </p>
        </div>
      </div>

      <div className="menu-like">
        <div
          className={buttonColor ? "like isLike" : "like"}
          onClick={() => {
            handleLikeImage(imageId);
          }}
        >
          <i className="fa-solid fa-thumbs-up"></i>
        </div>
        {numLikes === 0 ? "" : <div className="dislike">{numLikes}</div>}
      </div>
    </div>
  );
}

يعني حتى و إن كانت قيمة

likes.some((item) => item.user === userId)

تساوي false فعند تحديث الصفحة تتحول قيمة buttonColor إلى true

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

Chihab Hedidi · 15 نوفمبر 2023

على حسب تحليلي للكود أعتقد أن المشكلة تكمن في كيفية تحديث قيمة buttonColor بعد استدعاء handleLikeImage.

أي السطر الذي يحدث فيه المشكل هو :

setButtonColor(!buttonColor);

المشكلة المحتملة هي أن buttonColor قد لا يتم تحديثها بشكل صحيح عند استدعاء هذا السطر، رغم أن:

likes.some((item) => item.user === userId)

قد تعود بقيمة false.
حاول تغيير الدالة للتأكد من أن التحديث يتم بناء على القيمة السابقة بشكل صحيح.

setButtonColor(prevButtonColor => !prevButtonColor);

اما في حالة إذا كنت تقوم بتحديث likes بشكل غير مباشر (على سبيل المثال، استجابة لطلب HTTP)، فقد يكون من المفيد استخدام useEffect للتأكد من أن buttonColor يتم تحديثه بشكل صحيح بعد تحديث likes:

useEffect(() => {
  setButtonColor(likes.some((item) => item.user === userId));
}, [likes, userId]);

بحيث يجب عليك استدعاء هذا الكود خارج نطاق الدالة handleLikeImage.

محمود سعداوي2 · 15 نوفمبر 2023

بتاريخ 35 دقائق مضت قال Chihab Hedidi:
على حسب تحليلي للكود أعتقد أن المشكلة تكمن في كيفية تحديث قيمة buttonColor بعد استدعاء handleLikeImage.

أي السطر الذي يحدث فيه المشكل هو :
setButtonColor(!buttonColor);
المشكلة المحتملة هي أن buttonColor قد لا يتم تحديثها بشكل صحيح عند استدعاء هذا السطر، رغم أن:
likes.some((item) => item.user === userId)
قد تعود بقيمة false.
حاول تغيير الدالة للتأكد من أن التحديث يتم بناء على القيمة السابقة بشكل صحيح.
setButtonColor(prevButtonColor => !prevButtonColor);
اما في حالة إذا كنت تقوم بتحديث likes بشكل غير مباشر (على سبيل المثال، استجابة لطلب HTTP)، فقد يكون من المفيد استخدام useEffect للتأكد من أن buttonColor يتم تحديثه بشكل صحيح بعد تحديث likes:
useEffect(() => {
  setButtonColor(likes.some((item) => item.user === userId));
}, [likes, userId]);
بحيث يجب عليك استدعاء هذا الكود خارج نطاق الدالة handleLikeImage.

شكرا

نفس المشكل أخي

لا شيء تغير.

Chihab Hedidi · 15 نوفمبر 2023

بتاريخ 4 ساعة قال محمود سعداوي2:

شكرا

نفس المشكل أخي

لا شيء تغير.

جرب ايضا استخدام useEffect لتحديث buttonColor بناءً على قيمة likes و userId، وتأكد من وجود useEffect` خارج نطاق الدالة handleLikeImage.

   useEffect(() => {
     setButtonColor(likes.some((item) => item.user === userId));
   }, [likes, userId]);

و تحقق من القيم بعد تحديث likes، ضع console.log لقيم likes و userId بعد استدعاء handleLikeImage`للتحقق من أن القيم لا تتغير بشكل غير متوقع.

const handleLikeImage = async (id) => {
  if (!user) {
    navigate("/login");
    return;
  }

  try {
    const res = await axios.put(`/api/images/like/${id}`, like, {
      headers: {
        "Content-Type": "application/json",
        "x-auth-token": user.data.token,
      },
    });

    setLike(res.data);
    setNumLikes(res.data.likes.length);
  } catch (err) {
    setError(err.response.data.msg);
    setTimeout(() => {
      setError(null);
    }, 1500);
  }
};

useEffect(() => {
  setButtonColor(likes.some((item) => item.user === userId));
}, [likes, userId]);

حالة عنصر عند تحديث الصفحة

السؤال

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

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

Recommended Posts

Chihab Hedidi

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

Chihab Hedidi

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية