У меня есть такой код:
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 изменяется, как и ожидалось, но не в реальном времени. Он даже регистрирует новое значение, но не отображает его повторно. Что мне не хватает?
Это. Если я console.info, уровень в методе returnSelect в дочернем элементе также изменится



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В порядке. Все, что мне нужно было сделать, это заменить defaultValue на value.
defaultValue работает впервые при рендеринге. Если вы хотите все больше и больше изменять выбранное значение, вы можете просто использовать значение.
componentWillMount() это не должен быть метод, в котором вы используете запросы AJAX.
вместо этого пользователь componentDidMount().
Дальше:
componentWillMount() будет вызываться только один раз, перед первым render() для вашего компонента, поэтому он не будет запускать повторный рендеринг для него, вы должны подписаться на свои события Firebase в реальном времени в componentDidMount().
Можете ли вы проверить в React DevTools, обновляется ли состояние для родительского компонента?