Javascript 反应组分'；s的render方法调用两次，即使在获取数据之后也是如此

列表文件夹

是一个React组件。和“文件夹”数据道具从

主布局

组件传递到此组件

mainloayout

组件使用redux

connect

并获取“文件夹”

在这里，我的问题在

列表文件夹中，列出文件夹时有一些映射和计算。因为第二次调用需要更多的时间，这是一个重要的性能问题

下面是一个基本示例。我正在使用
redux saga
和
immutable.js
。
我正在获得
名称（ContainerDesc）
，
id（id加密）
，
haveChildFolders
和
childFolders

在这里，它两次进入
if（folders！==undefined）{…
代码块内部

render（）{
const{classes，folders}=this.props；
让reactListItems=[]；
如果（文件夹！==未定义）{
var iterator1=文件夹[Symbol.iterator]（）；
for（迭代器1的let项）{
reactListItems.push（{
“名称”：item.get（'ContainerDesc'），
“id”：item.get（'IdEncrypted'），
“haveChildFolders”：item.get（'ChildContainers'）。大小>0，
'childFolders'：item.get（'ChildContainers'）
})
}
}
返回(
...
);
}
对于第二次调用，文件夹数据可能未更改，也可能未定义，因此请添加另一个条件，检查componentWillReceiveProps（）中的文件夹数据是否已更改，例如：

componentWillReceiveProps(nextProps){    
     if (folders.length !== nextProps.folders.length) {
       return ...
    }
}

或者，您可以添加条件shouldComponentUpdate（），并在条件不满足时停止组件进行更新

shouldComponentUpdate(nextProps){    
         if (folders.length !== nextProps.folders.length) {
           return true
        }
        else{
          return false
        }
    }

我找到了调用两次
ListFolders
的原因。
我正在使用
ListFolders
内部
SidebarComponent
和
Sidebar
中，我使用了桌面和移动菜单的材质ui
hidden
助手。下面的示例代码

<Hidden mdUp implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>

<Hidden smDown implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>


...
我使用了shouldComponentUpdate并发现了一个新东西。在文件夹已经被获取并写入this.props.folder后，它将重新进入呈现方法，并且this.props.folders再次未定义。检查nextrops.folders的值，它可能包含所需的文件夹数据，以便将其存储在状态或任何变量中，并在呈现方法中使用它
<Hidden mdUp implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>

<Hidden smDown implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>