Компонент не обновляется при изменении базы данных firebase

У меня есть такой код:

export default class MainStudentPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {user: {nickname: '', friends: {accepted: [], invites: [], all: []}}};
    }

    componentWillMount() {
        const {uid} = firebase.auth().currentUser;
        firebase.database().ref('Users').child(uid).on('value', (r, e) => {
            if (e) {
                console.info(e);
                return null;
            }
            const user = r.val();
            this.setState({user: user});
        });
    }

    render() {
        const {user} = this.state;
        return (
                <LevelSelectComponent user = {user}/>
            </div>
        );
    }
}

А это ребенок:

export default class LevelSelectComponent extends React.Component {
    returnSelect = (user) => {
        const lvls = [{
            db: 'Podstawówka',
            text: 'PODSTAWOWA'
        }, {
            db: 'Gimnazjum',
            text: 'GIMNAZJALNA'
        }, {
            db: 'Liceum',
            text: 'ŚREDNIA'
        }];
        let options = [];
        if (!user.level) {
            options.push(<option selected = {true} value = {null}>WYBIERZ POZIOM</option>)
        }
        options = options.concat(lvls.map((lvl, i) => {
            return (
                <option key = {i} value = {lvl.db}>{`SZKOŁA ${lvl.text}`}</option>
            )
        }));
        return (
            <select defaultValue = {user.level}>
                {options.map(opt => opt)}
            </select>
        )
    };
    render() {
        const {user} = this.props;
        return (
            this.returnSelect(user)
        );
    }
}

Итак, я хочу обновить выбранное значение по умолчанию, чтобы оно соответствовало значению в базе данных. Я слушаю базу данных firebase в реальном времени на предмет изменений. Каждый раз, когда я обновляю страницу, defaultValue изменяется, как и ожидалось, но не в реальном времени. Он даже регистрирует новое значение, но не отображает его повторно. Что мне не хватает?

Можете ли вы проверить в React DevTools, обновляется ли состояние для родительского компонента?

Shashank Shekhar 06.12.2018 11:41

Это. Если я console.info, уровень в методе returnSelect в дочернем элементе также изменится

Alex Ironside 06.12.2018 11:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
158
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

В порядке. Все, что мне нужно было сделать, это заменить defaultValue на value.

defaultValue работает впервые при рендеринге. Если вы хотите все больше и больше изменять выбранное значение, вы можете просто использовать значение.

king neo 06.12.2018 12:08

componentWillMount() это не должен быть метод, в котором вы используете запросы AJAX. вместо этого пользователь componentDidMount().

Дальше:

componentWillMount() будет вызываться только один раз, перед первым render() для вашего компонента, поэтому он не будет запускать повторный рендеринг для него, вы должны подписаться на свои события Firebase в реальном времени в componentDidMount().

Другие вопросы по теме