Как сделать выборку в реальном времени в React Native?
Привет, в моем проекте есть раздел комментариев для видео. Итак, я ожидаю, что комментарии будут отображаться сразу после публикации пользователем. Я пробовал метод componentWillUpdate(). Но он каждый раз перерисовывает пользовательский интерфейс, поэтому вызывает некоторую тряску в пользовательском интерфейсе. Также я пытался вызвать метод fetch в рамках обещания postComment. Это означает, что во время выборки публикации комментария я пытаюсь вызвать следующую выборку для отображения отправленных комментариев. Но бесполезно. Ниже приведен код, который я пробовал
код
postComment(){
fetch(GLOBAL.COMMENT + `${this.props.id}/new/0`, {
method: 'POST',
headers: {
'Authorization': token,
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
comment_content: this.state.text
})
})
.then((response) => response.json())
.then((responseData) => {
this.setState({
text: '',
isLoad: false
})
}).then(() => {
fetch(GLOBAL.GET_COMMENT + `${this.state.unit_id}/`, {
method: 'GET',
headers: {
'Authorization': token
}
}).then((response) => response.json())
.then((responseData) => {
this.setState({
comment: responseData.data,
tab2: true,
tab3: false,
isLoading: false
})
});
})
}
Есть ли какое-нибудь решение для этого? Пожалуйста, помогите. Любая помощь приветствуется. Спасибо!
Вы можете добавить новый опубликованный комментарий в свой плоский список data без извлечения. Вам не нужно получать снова
@squeekyDave Итак, какие изменения мне нужно внести в мой существующий код? Пожалуйста, помогите.
@anu Итак, я предполагаю, что ваши комментарии к серверной части хранятся в БД? Если это так, то после завершения запроса на публикацию комментариев вызовите функцию, которая извлечет все комментарии и установит состояние с вновь полученными комментариями, что выполнит повторный рендеринг, и вы увидите новые комментарии, как только они размещены.
@squeekyDave Итак, вместо этой выборки в рамках обещания я должен сделать что-то вроде этого ((then) => getComments() ) Я прав?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Так что это будет выглядеть примерно так, я не уверен, как настроен остальной ваш код, так что отнеситесь к этому с щепоткой соли.
getComments() {
fetch(GLOBAL.GET_COMMENT + `${this.state.unit_id}/`, {
method: 'GET',
headers: {
'Authorization': token
}
})
.then((response) => response.json())
.then((responseData) => {
this.setState({
comment: responseData.data,
tab2: true,
tab3: false,
isLoading: false
})
});
})
};
postComment() {
fetch(GLOBAL.COMMENT + `${this.props.id}/new/0`, {
method: 'POST',
headers: {
'Authorization': token,
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
comment_content: this.state.text
})
})
.then((response) => response.json())
.then((responseData) => {
this.getComments();
})
}
Что вам нужно сделать, так это изменить состояние после добавления комментария, чтобы он автоматически перерисовывался и отображал все комментарии, как только они были добавлены. Поэтому, если комментарии находятся на задней панели, после завершения запроса вызовите функцию, которая выводит все комментарии и обновляет состояние.