有人请帮助我解决此错误在现有状态转换期间无法更新
当我渲染这个时,我得到如下错误
在现有状态转换期间(例如在内部
render
或另一个组件的构造函数中)无法更新。渲染方法应该纯粹是道具和状态的函数;构造函数的副作用是反模式,但可以移至componentWillMount
。
我试过把this.props.ifListChanged(this); 这段代码位于componentWillUpdate和componentDidUpadate内部,但是花费了很多时间,却没有出错(将近2分钟)。
import React from 'react';
import ListItemComponent from './ListItem.jsx';
import DropDownButtonComponent from './DropDownButton.jsx';
import DropDownStyle from '../../../../css/sass/drop-down.scss';
module.exports = React.createClass({
handleClick: function () {
this.setState({open: !this.state.open});
},
getInitialState: function () {
return {
open: false,
//listItems: this.props.listItems,
selectedItems:[],
title: this.props.dropdownTitle
}
},
handleItemClick: function (item) {
var selectedItems = [];
if(this.props.multiple == true){
selectedItems = this.state.selectedItems;
if(selectedItems.indexOf(item)==-1){
selectedItems.push(item);
}else{
selectedItems.splice(selectedItems.indexOf(item),1)
}
this.setState({
title: this.state.selectedItems.length+" selected",
selectedItems: selectedItems
});
} else{
selectedItems = [];
selectedItems.push(item);
this.setState({
title: item,
selectedItems: selectedItems,
open: false
});
}
//this.sendStateToParent();
},
sendStateToParent: function(){
this.props.ifListChanged(this);
},
handleTextChange: function (event) {
var filteredItems = [];
this.props.listItems.map(function(item){
if(item.toLowerCase().search(event.target.value.toLowerCase()) != -1){
filteredItems.push(item);
}
},this);
this.setState({
listItems: filteredItems
});
},
clearSelected: function(){
this.setState({
title: this.props.dropdownTitle,
selectedItems: [],
});
},
render: function () {
this.props.ifListChanged(this);
var index = 0;
var list=[];
if (this.state.listItems != undefined) {
list = this.state.listItems.map(function (item) {
return (
<ListItemComponent
key={index++}
item={item}
whenItemClicked={this.handleItemClick}
className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
/>);
}.bind(this));
} else {
list = this.props.listItems.map(function (item) {
return (
<ListItemComponent
key={index++}
item={item}
whenItemClicked={this.handleItemClick}
className={this.state.selectedItems.indexOf(item) != -1 ? "active" : ""}
/>);
}.bind(this));
}
return <div className="btn-group bootstrap-select form-control">
<DropDownButtonComponent
whenClicked={this.handleClick}
title={this.state.title}
/>
<ul className={"dropdown-menu inner dropdown-menu " + (this.state.open ? "show" : "") }>
{this.props.search? <li><input type="text" style={{margin:"auto", maxWidth:"96%"}} onChange={this.handleTextChange} placeholder="Search"/></li> :""}
<li className="disabled"><a>Select from below list {this.props.multiple ? <i title="clear all" style={{fontSize:"15px"}} onClick={this.clearSelected} className="text-danger fa fa-ban pull-right"></i>: ""}</a></li>
{list}
</ul>
</div>
}
});
ListItem.jsx
import React from 'react';
module.exports = React.createClass({
handleClick: function() {
this.props.whenItemClicked(this.props.item);
},
render: function() {
return <li onClick={this.handleClick} className={this.props.className}>
<a>{this.props.item}</a>
</li>
}
});
DropDownButton.jsx
import React from 'react';
module.exports = React.createClass({
render: function() {
return <button onClick={this.props.whenClicked} className="btn dropdown-toggle btn-default" type="button">
<span className="filter-option pull-left">{this.props.title}</span>
<span className="bs-caret"><i className="fa fa-chevron-down"></i></span>
</button>
}
});
提前感谢帮助我的那一位。谢谢你。
我认为您有一个道具/状态设计问题。您this.props.ifListChanged(this)
的渲染函数内部非常可疑。您的渲染函数不需要向父级发出任何信号。父母已经知道它发出的所有道具,如果父母需要知道状态,那么很可能一开始就不应该是状态。
从您的代码中可以收集到的信息来看,
如果需要将两者的结果都发送到组件本身内部的另一个动作(例如,过程选择按钮之类的东西),则这是一个不错的设置。
然后(只有那时)您才能将状态发送给父级或其他地方。
如果家长需要了解双方所有的时间(例如当过程按钮或工艺操作是别的地方),那么最好是:
handleFilterUpdate
在父级内部定义一些方法和“ handleSelectionUpdate”方法,并将其作为道具传递给子级。this.props.handleFilterUpdate
从每当有事与选择或过滤器的孩子,“this.props.handleSelectionUpdate`。本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句