У меня есть список песен, когда я нажимаю на любую из них, я открываю модальное окно плеера, затем отправляю запрос на увеличение количества просмотров этой песни, и в то же время я отображаю в подробной песне представление счета, но он отображает предыдущий последний счет
Например, эта песня имеет 30 просмотров после того, как я отправил запрос, она должна быть 31, но это все еще 30 деталей песни
Так есть ли способ сделать это в режиме реального времени?
Код
Просто, чтобы объяснить, я получаю песни из API, затем передаю их в функцию манипуляции, а затем сохраняю их в состоянии, после того, как пользователь щелкнет любую песню в list Я отправляю действие, чтобы сохранить весь список в хранилище приставок,
Редуктор
let initialState = {
allSongs: [],
currentIndex: 0,
};
const songsInPlayerReducer = (state = initialState, action) => {
switch (action.type) {
case SONGS_IN_PLAYER:
return {
...state,
allSongs: action.songs,
currentIndex: action.index,
};
default:
return state;
}
};
export default songsInPlayerReducer;
Действие
export const saveSongsPlayer = (songs, index) => {
return {
type: SONGS_IN_PLAYER,
songs,
index,
};
};
Главный экран (получить песни из API)
manipulateArray = async array => {
let songs = [];
array.map(track =>
songs.push({
id: track.id,
name: track.name,
countview: track.countview,
url: this.state.url + track.sounds,
img: this.state.url + track.avatar,
}),
);
return songs;
};
getRecentSongs = async () => {
try {
let response = await API.get('/index');
let {recent_tracks} = response.data.data;
let recent_songs = await this.manipulateArray(recent_tracks);
this.setState({
recent_songs,
loading: true,
});
} catch (error) {
console.log(error);
this.setState({error: true});
}
};
// Here a function I call after I press to any song in List
playSong = index => {
this.props.saveSongs(this.state.recent_songs, index);
};
Musi c компонент проигрывателя // Я просто рендеринг представлений счетчика (из хранилища примитивов) и отправляю запрос в API для увеличения представлений песни
incremntSongView = async () => {
const {songs, currentIndex} = this.props;
let id = songs[currentIndex].id;
try {
await API.post('/increnentView', {
id,
});
console.log('increment Done');
} catch (err) {
console.log(err);
}
};
onLoad = data => {
this.setState(
{
duration: Math.floor(data.duration),
loading: false,
},
() => this.incremntSongView(),
);
}
<Text>
{this.props.songs[this.props.currentInx].countview}
</Text>