Состояние React не обновляется в DOM, несмотря на изменения в useEffect для заголовков и реквизита исполнителей. ⇐ Javascript

[Anonymous]

Я создаю музыкальный проигрыватель в React и пытаюсь динамически обновлять название трека и исполнителя, используя useEffect, когда реквизиты (название, исполнитель) меняются. Однако, хотя значения корректно обновляются в журнале консоли, они не отражаются в DOM.
Я использую перехватчики состояния (useState) для названия и исполнителя, и я гарантировал, что что компонент должен перерисовываться при изменении этих состояний. Несмотря на это, DOM по-прежнему не обновляется новыми значениями.
import React, { useEffect, useState } from 'react';
import { FaBackward, FaPlay, FaPause, FaForward, FaHeart, FaRandom, FaVolumeUp } from 'react-icons/fa';
import useAudio from '../Audio/useAudio';
import api from '../../Services/api';

const Playbar = ({ url, title, artist, id }) => {

//url is the audio url
//title is the title of the track
//artist is the artist of the song
//id is the id of the track
const [playing, toggle] = useAudio(url);

const [titles, setTitles] = useState(title || "");
const [artists, setArtists] = useState(artist || "");

// Update titles and artists when props change
useEffect(() => {
setTitles(title || "");
setArtists(artist || "");
}, [title, artist]);

// Update current playing track in the database if playing is true and the track has changed
useEffect(() => {
if (playing) {
api.post(`/api/currentplaying`, {
playing: playing,
title: titles,
artist: artists,
id: id
});
}
}, [titles, artists, playing, id]);

// Fetch current playing track from the database

useEffect(() => {
const fetchCurrentPlaying = async () => {
try {
const res = await api.get(`/api/fetchcurrentplaying/${id}`);
if (res.data.current && res.data.current.length > 0) {
const currentTrack = res.data.current[0];
setTitles(currentTrack.title);
setArtists(currentTrack.artist);
} else {
console.log("No current playing data found.");
}
} catch (error) {
console.error('Error fetching current playing:', error);
}
};

fetchCurrentPlaying();
}, [id]);

// Log when the playbar is updated
useEffect(() => {
console.log("Playbar updated with:", { url, title, artist });
}, [url, title, artist]);

return (




{titles || "No Title"}
{console.log("Title", titles)}
{console.log("Artist", artists)}
{artists || "No Artist"}




{playing ? (

) : (

)}







);
}

export default Playbar;

Проблема:
Свойства title и Artist передаются в компонент Playbar, а переменные состояния titles и Artists соответствующим образом обновляются внутри useEffect.
Эти переменные состояния корректно регистрируются в консоли (console.log), но DOM не отражает обновленные значения состояния.
Я подтвердил, что состояние обновляется в консоли, но это не так. t перерисовать DOM как ожидалось.
Что я пробовал:
Я использовал useEffect для обновления значений состояния при изменении реквизита.
Я Я проверяю, что setTitles и setArtists вызываются правильно.
Я использую React.memo для компонента Playbar, но проблема не устранена.
Может ли кто-нибудь помочь мне определить, почему обновленные значения состояния не отражаются в DOM, даже если они правильно зарегистрирован?
useAudio.js
import { useState, useEffect } from 'react';

const useAudio = (url) => {
const [audio, setAudio] = useState(new Audio(url));
const [playing, setPlaying] = useState(false);

const toggle = () => {
setPlaying(prev => !prev);
};

useEffect(() => {
const handleEnded = () => setPlaying(false);
audio.addEventListener('ended', handleEnded);

return () => {
audio.pause();
audio.removeEventListener('ended', handleEnded);
};
}, [audio]);

useEffect(() => {
if (url && url !== undefined) {
const newAudio = new Audio(url);
setAudio(newAudio);
audio.src = url;
setPlaying(true);

}else{
setPlaying(false);
}
}, ); useEffect(() => { if (playing && ur ... s-and-arti