Как дать команду на ре-рендер после добавления элемента в firebase?

Question

Nikita Shchypylov @Nikulio

NaN !== NaN

Как дать команду на ре-рендер после добавления элемента в firebase?

Всем привет
При загрузке получаю все посты в componentDidMount(), но при добавлении нового элемента список обновляется только при перезагрузке страницы.
Код:

addMessage = e => {
    e.preventDefault();
    let data = {
      component: this.state.component,
      component_name: this.state.component_name,
    };
    this.props.addComponent(data);
  };

export const addComponent = data => async dispatch => {
  let comps = await fire.database().ref('components');
  comps.push({
    name : data.component,
    comp: data.component_name,
  });
};

Единственный вариант, который нашел - убрать e.preventDefault(), но это не очень нравится.

Вопрос задан более трёх лет назад
111 просмотров

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 2

9 комментариев

Nikita Shchypylov @Nikulio Автор вопроса
Да, вот так я их тяну :

export const fetchComponents = () => async dispatch => { let comps = await fire.database().ref("components"); return comps.on("value", snapshot => { return dispatch({ type: FETCH_ITEMS, payload: snapshot.val() }); }); };

Но они в стейте лежат в переменной content, она же отвечает за вывод:
<ul>{content}</ul>

Когда я добавляю элемент, это переменная не меняется и код не обновляется :(
Написано более трёх лет назад
Олег Гамега @gadfi

Nikita Shchypylov, action все правильно, или мутируете данные, или что то не то с компонентом

Написано более трёх лет назад
Nikita Shchypylov @Nikulio Автор вопроса

Олег Гамега, Хм...но ведь он вызывается один раз в componentDidMount. Мне кажется, нужно что-то вроде on("child_added"), или как-то менять родной стейт, а не редакса...

Написано более трёх лет назад
Олег Гамега @gadfi

Nikita Shchypylov, на самом деле нет, при старте вы дергаете в componentDidMount метод котоырй подпишится на узел, а дальше подписка продолжает жить
что говорит redux devtools ?

Написано более трёх лет назад
Nikita Shchypylov @Nikulio Автор вопроса

Олег Гамега, Странно, в порядке, вызывает мой AC
Кстати, спасибо за react devtools, не знал о нём :)

Написано более трёх лет назад
Олег Гамега @gadfi

Nikita Shchypylov, значит скорее всего мутируете стору

Написано более трёх лет назад

Nikita Shchypylov @Nikulio Автор вопроса

Олег Гамега,
import * as actions from "../actions";

export default function(state = [], action) {
  switch (action.type) {
    case actions.FETCH_ITEMS:
      let items = action.payload;
      return [...state, items];
    default:
      return state;
  }
}

Написано более трёх лет назад

Nikita Shchypylov @Nikulio Автор вопроса

Олег Гамега, Так я создаю стор с моими элементами

Написано более трёх лет назад
Олег Гамега @gadfi

Nikita Shchypylov, если items массив то нужно
return [...state, ...items];

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

React

+1 ещё

Простой
Как реализовать Микрофронтенд с использованием Vite с Typescript?
- 1 подписчик
- вчера
- 38 просмотров
0

ответов
React

Простой
У меня react up ложу .env REACT_APP_PASSWORD=пароль Локально все ок Но на гите не видит..почему?
- 1 подписчик
- вчера
- 53 просмотра
0

ответов
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- вчера
- 91 просмотр
2

ответа
React

Простой
Почему не рендерится React-компонент в методе render( )?
- 1 подписчик
- вчера
- 84 просмотра
1

ответ
React

Простой
У меня react up и я беру из .env пароль а мне бьет ошибку, как быть?
- 1 подписчик
- 17 апр.
- 66 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Сдвигается нижняя граница во время поиска Как исправить?
- 1 подписчик
- 16 апр.
- 47 просмотров
0

ответов
JavaScript

+4 ещё

Простой
Что делать, если после залива приложения на VPS страница остается недоступной?
- 1 подписчик
- 15 апр.
- 86 просмотров
2

ответа
React

Простой
В какую папку React компилирует все файлы?
- 1 подписчик
- 13 апр.
- 82 просмотра
2

ответа
React

+1 ещё

Средний
При стилизации компонента React не видны scss переменные подключенные модулем к index.js, в чем может быть проблема?
- 2 подписчика
- 13 апр.
- 317 просмотров
1

ответ
React

+1 ещё

Простой
Ошибка Cannot read properties of null (reading 'useContext')?
- 1 подписчик
- 13 апр.
- 43 просмотра
0

ответов
Показать ещё Загружается…

Frontend React

Glob-com

от 100 000 ₽

JS|React Native разработчик

Венста • Киров

от 60 000 до 120 000 ₽

Frontend developer (React)

Баланс-Платформа • Москва

До 250 000 ₽

Настроить рекламу в VK

20 апр. 2024, в 13:56

7000 руб./за проект

Настроить рекламу в Авито

20 апр. 2024, в 13:52

7000 руб./за проект

Помочь с запуском бота

20 апр. 2024, в 13:23

1000 руб./за проект

Answer 1 · 2018-01-17 13:06:19

Олег Гамега @gadfi

https://gamega.org

так у вас же по идее есть рабочая подписка, вы добавили данные а в событии on() они уже обновились

Ответ написан более трёх лет назад

9 комментариев

Answer 2 · 2018-01-17 15:08:44

Вам нужно подписаться на события от Firebase (API документация - может здесь, может где-то еще в доке, должно быть что-то связанное с "сообщениями от базы", скорее всего здесь).

Далее, когда вам приходить событие в стиле: в_базу_добавился_новый_элемент вы должны вызвать action, который будет обновлять у вас в сторе ваши данные. Таким образом, если тут все правильно приготовить, то у вас в компонент придут новые пропсы и он перерисуется.

То есть, здесь совсем не понадобятся методы жизненного цикла у компонентов (разве что, componentWillReceiveProps в будущем, но пока точно без него можно сделать).

Как дать команду на ре-рендер после добавления элемента в firebase?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт