Question

我在子组件中的Material UI中有一个Drawer组件（非持久性，仅在按钮单击时打开），我想在其中显示通知列表。通知从服务器加载并从父组件传递。

我可以验证数据是否在状态更改时更新，并调用下面的render方法。也正确调用.map（）方法。但抽屉的内容仍然是空的。它显然适用于使用一堆静态listItems，但不是在使用基于列表的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>
    );
}

Answer 1

所以当你传递道具时

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

确实在父组件中修改了this.state.notifications。一旦父组件的render方法调用;它也呈现所有子组件。因此，子组件中的道具将保持最初呈现，直到您按需提出它为止。

要在子组件中进行修改，您可以使用 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 : []
    }
}

Answer 2

谢谢，我尝试使用componentWillReceiveProps（）并设置我的子组件的状态，但不幸的是它没有帮助。通知确实在子组件中更新，但它仍然没有呈现新的ListItem。

然而，与此同时，我确实设法解决了它。至少这对我有用。所以这是我的解决方案，供将来参考。我不得不将映射提取到一个单独的函数中：

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需要一个ListItem的常量列表，然后才能呈现它。因此，如果有人对此行为有解释，我很乐意听到。

React：抽屉内容不会在状态更改时呈现

2 个答案: