无法在现有状态转换期间更新-未使用任何非法的setState()
Cannot update during an existing state transition - Not using any illegal setState()
有人请帮我解决这个错误在现有状态转换期间无法更新
当我渲染这个时,我会得到如下的错误
无法在现有状态转换期间进行更新(例如
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)
非常可疑。您的渲染函数应该不需要向父对象发出任何信号。父级已经知道它发送的所有道具,如果父级需要知道状态,那么它很可能一开始就不应该是状态。
根据我从你的代码中收集到的信息,
- 您的列表组件接收未筛选的项目列表作为道具
- 并且它具有跟踪filtereditem和selectededitem的状态
如果两者的结果都需要发送到的某个地方,并在组件内部执行另一个操作(例如进程选择按钮或其他什么),这是一个很好的设置
然后(也只有到那时),您才会将状态发送给父级或其他地方。
如果父母需要一直了解(例如,当处理按钮或处理操作在其他地方时),那么最好:
- 在父级中定义一些
handleFilterUpdate
和"handleSelectionUpdate"方法,并将它们作为道具传递给子级 - 还将筛选后的列表和所选内容从父对象传递给子对象
- 每当选择或筛选器出现问题时,从子级调用
this.props.handleFilterUpdate
和"this.props.handleSelectionUpdate"
相关文章:
- $rootScope未使用forEach进行更新
- 无法在现有状态转换期间更新-未使用任何非法的setState()
- 角度控制器未使用OcLazyLoad和ngRoute加载
- 绑定到 x 可编辑的成功函数未使用正确的参数执行
- 使用jQuery将单击绑定到页面中未使用的部分
- 未使用Javascript在IE中设置Cookie
- Ionic:AngularJS变量未使用$scope更新DOM
- 元素未使用当前玩家操作进行更新
- 将方法从控制器注入到未使用右变量调用的指令
- LinkedIn共享链接图片未使用自定义url更新
- 地图视图未使用PhoneGap加载
- 组件未使用ReactJS和React Router进行渲染
- 表单未使用 MVC 提交任何值 Asp.Net
- 短信未使用Branch.io和intl tel输入发送到intl号码
- 表列未使用tablesorter插件进行排序
- placeHolder id未使用style.display显示
- 如何忽略单词like“”中的未使用空格;测试-文本”;同时构建html标签
- 表单中的数据未使用javascript中的serialize()获取
- 创建可在任何地方使用的 JS 函数?范围和功能“未定义”的问题
- jQuery插件错误在IE6/7,试图运行任何未使用的键被按下.如何战斗