Question

它当前导致无限循环并使我的浏览器停顿。有任何想法吗？我希望在打开之前清除数据，否则我会从之前的模态调用中获得一些数据。

  clearNotes: function(){
        this.setState({notes: ''});

},
render: function () {
    return (
        <div>
            <SkyLight ref="notesDialog" title="View Notes" 
            beforeOpen={this.clearNotes} showOverlay={true} >
                <DataGrid data={this.state.notes}
                          onSort={this.handleNotesSorting}
                          currentSortKey={this.state.notesSortKey}
                          sortIsAscending={this.state.notesSortIsAascending}>
                    <Column header="User" key="user" />
                    <Column header="Notes" key="note" />
                    <Column header="Type" key="type" />
                    <Column header="Date" key="date" renderWith={DateFormat} />
                </DataGrid>
            </SkyLight>

Answer 1

我认为问题在于beforeOpen事件每次都会被触发，反应会自行重新发布。 - ＆GT;这将调用setState方法 - ＆gt;这将重新渲染组件 - ＆gt; ...

您可以尝试添加shouldComponentUpdate方法来检查状态是否真的发生了变化。这看起来像这样：

shouldComponentUpdate: function(nextProps, nextState) {
    nextState.notes === this.state.notes ? return false : return true;
}

注意：您应该检查所有属性和状态。如果返回false，shouldComponentUpdate将始终取消重新呈现过程！即使国家或道具发生了变化。

Skylight Modal React组件 - 在打开之前清除数据

1 个答案: