Реакция: содержимое Drawer не отображается при изменении состояния - PullRequest
Новая
       12

Реакция: содержимое Drawer не отображается при изменении состояния

0 голосов
/ 18 мая 2018

У меня есть компонент Drawer (не постоянный, открывается только при нажатии кнопки) пользовательского интерфейса Material в дочернем компоненте, где я хочу показать список уведомлений.Уведомления загружаются с сервера и передаются из родительского компонента.

Я могу убедиться, что данные обновляются при изменении состояния и вызывается метод визуализации, приведенный ниже.Также метод .map () вызывается правильно.Но содержимое ящика остается пустым.Очевидно, это работает при использовании нескольких статических списочных элементов, но не при использовании map () на основе списка.Я предполагаю, что это связано с тем, что ящик не отображается, когда происходит обновление.Но должно быть возможно добавить динамические данные в ящик, верно?Что мне здесь не хватает?

Любая помощь высоко ценится. 

render() {
    return (
        <Drawer>
            <List>
                {this.props.notifications.map((n, key) => {
                <ListItem key={key}>
                    <ListItemIcon>
                        <Info/>
                    </ListItemIcon>
                    <ListItemText inset primary={n.header} secondary={n.message}/>
                </ListItem>
                })}
            </List>
        </Drawer>
    );
}

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Спасибо, я попытался использовать componentWillReceiveProps () и установить состояние моего дочернего компонента, но, к сожалению, это не помогло.Уведомления обновляются в дочернем компоненте, но он по-прежнему не отображает новые элементы ListItems.

Однако, в то же время, мне удалось его решить.По крайней мере, это работает для меня.Итак, вот мое решение для дальнейшего использования.Мне пришлось извлечь сопоставление в отдельную функцию: 

const mapItem = (notifications) => {
    return notifications.map((n, key) => (
        <ListItem key={key}>
            <ListItemIcon>
                <Info/>
            </ListItemIcon>
            <ListItemText inset primary={n.header} secondary={n.message}/>
        </ListItem>
    ));
};

И затем использовать это в методе рендеринга следующим образом: 

render() {
    return (
        <Drawer>
            <List>
                {mapItem(this.props.notifications)}
            </List>
        </Drawer>
    );
}

Это работает, но я, честно говоря, не могу сказать,почему соотв.почему это не наоборот.Похоже, List ожидает постоянный список ListItems, прежде чем он будет отрендерен.Поэтому, если у кого-нибудь есть объяснение этому поведению, я бы с удовольствием его услышал.

0 голосов
/ 18 мая 2018

Таким образом, когда вы передаете реквизиты 

 <NotificationList notifications={this.state.notifications}>

Это правда, что this.state.notifications модифицируется в родительском компоненте.Как только ваш метод рендеринга родительского компонента активируется;он также отображает все дочерние компоненты.Таким образом, реквизиты в дочернем компоненте останутся такими, какими они были изначально отображены, до тех пор, пока вы не спросите их по требованию.

Для изменения в дочерних компонентах вы можете использовать componentWillReceiveProps () 

 componentWillReceiveProps(props){
   console.log(props.notifications) //this will get you modified bits.
   this.setState({notifications:props.notifications});
 }

И при рендеринге дочернего компонента 

{this.state.notifications.map((n, key) => {
                <ListItem key={key}>
                    <ListItemIcon>
                        <Info/>
                    </ListItemIcon>
                    <ListItemText inset primary={n.header} secondary={n.message}/>
                </ListItem>
 })}

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

construction(props){
 super(props);

    this.state = {
     notifications : []
    }
}
...