Skylight Modal React 组件——打开前清空数据

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 事件每次都会被触发，反应重新渲染自己。 -> 这将调用 setState 方法 -> 这将重新呈现组件 -> ...

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

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

注意：您应该检查所有属性和状态。 shouldComponentUpdate 如果 returns 为假，将始终取消重新渲染过程！即使状态或道具发生变化。

Skylight Modal React 组件——打开前清空数据

Skylight Modal React component - clear data beforeOpen

reactjs