无法在现有状态转换期间更新-未使用任何非法的setState()

Cannot update during an existing state transition - Not using any illegal setState()

本文关键字:任何 未使用 非法 setState 更新 状态 转换      更新时间:2023-09-26

有人请帮我解决这个错误在现有状态转换期间无法更新

当我渲染这个时,我会得到如下的错误

无法在现有状态转换期间进行更新(例如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"