Блог

Главная - Вопросы по программированию - Как выполнить выборку в реальном времени в react native?

Как выполнить выборку в реальном времени в react native?

#javascript #reactjs #react-native #fetch #real-time

#javascript #reactjs #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

                })
            });
    })

}

Есть ли какое-либо решение для этого? Пожалуйста, помогите.Приветствуется любая помощь.Спасибо!

Комментарии:

1. Что вам нужно сделать, это изменить состояние после добавления комментария, чтобы он автоматически перезапускался и отображал все комментарии, как только они были добавлены. Итак, если комментарии находятся на серверной части, после завершения запроса вызовите функцию, которая возвращает все комментарии и состояние обновления.

2. Вы можете добавить новый опубликованный комментарий в свой flatlist data без выборки. Повторную выборку выполнять не нужно

3. @squeekyDave Итак, какие изменения мне нужно внести в мой существующий код? Пожалуйста, помогите.

4. @anu Итак, я предполагаю, что ваши комментарии к серверной части хранятся в базе данных? Если это так, то после завершения запроса post comment вызовите функцию, которая извлечет все комментарии и установит состояние для вновь выбранных комментариев, которые выполнят повторный рендеринг, и вы увидите новые комментарии, как только они будут опубликованы.

5. @squeekyDave Итак, вместо этой выборки в promise я должен сделать что-то вроде этого ((then) => getComments() ) Я прав?

Ответ №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();
      })

}