react同一組件屢次使用時，數據源this.setState引發的問題

本人react初學者，在使用時遇到的問題，而且解決了，因此和你們一塊兒分享react

我是用的是react + ant-design開發的，不囉嗦直接上問題代碼數組

return ( <div>
                <BaseTitle title='專家庫' />
                <span>
                <Select datas={this.state.selectData1} lable='所屬單位：' placeholder='選擇所屬單位' value="dictCode" name="dictName" width="20%" />
                <Select datas={this.state.Data2} lable='設備專業：' placeholder='選擇設備專業' value="gpCode" name="gpName" width="20%"/>
                    <Search style={{width: '25%'}}/>
                </span>
                <GlobalTable columns={columns} dataSource= {this.state.dataSource} RowClick={this.RowClick}/>
            </div>
        )

上面的兩個select是我本身結合antd本身寫的select組件antd

render() { var {datas, lable, placeholder, value, name, width} = this.props; selectChildrens = []; datas.map((item, index) => { selectChildrens.push(<Option key={item[value]}>{item[name]} </Option>)
 }); return ( <span>
                <span>{lable}</span>
                <Select showSearch style={{ width: width }} placeholder={placeholder} optionFilterProp="children" onChange={this.handleChange} onBlur={this.handleBlur} onFocus={this.handleFocus} filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} > {selectChildrens} </Select>
            </span>
        )

裏面最主要的就是render以後框架

 selectChildrens = [];這步操做是每次渲染的時候清空options裏面的數據源，爲何這麼作呢，由於頁面上調用了兩次select組件，也就請求了兩次數據源react的setState首先是異步的，而後他是在每次設置數據源的時候都從新渲染相關組件（這是react社區中找到的答案，渲染機制問題），這樣就出現問題了，若是使用的是數組而後又執行了push操做，就出現了，難以想象的事情，就是數據源裏面的數據會增長，每一次渲染都會增長，由於是push操做，這裏其實我也不想用push,可是antd的框架給option賦值就是這樣設計的若是每次清空就解決問題了，小夥伴在js中操做數組必定要注意push操做。另外但願我遇到的問題對你們有幫助