在现有状态转换期间无法更新-不使用任何非法的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)的渲染函数内部非常可疑。您的渲染函数不需要向父级发出任何信号。父母已经知道它发出的所有道具,如果父母需要知道状态,那么很可能一开始就不应该是状态。

从您的代码中可以收集到的信息来看,

  • 您的列表组件会收到未经过滤的商品列表作为道具
  • 并且它具有跟踪已过滤项和选定项的状态。

如果需要将两者的结果都发送到组件本身内部的另一个动作(例如,过程选择按钮之类的东西),则这是一个不错的设置
然后(只有那时)您才能将状态发送给父级或其他地方。

如果家长需要了解双方所有的时间(例如当过程按钮或工艺操作是别的地方),那么最好是:

  • handleFilterUpdate在父级内部定义一些方法和“ handleSelectionUpdate”方法,并将其作为道具传递给子级。
  • 还将过滤后的列表和选择从父级传递给子级。
  • 调用this.props.handleFilterUpdate从每当有事与选择或过滤器的孩子,“this.props.handleSelectionUpdate`。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

警告:setState(...):在现有状态转换期间无法更新

来自分类Dev

React Native / Redux-setState-在现有状态转换期间无法更新

来自分类Dev

setState(...):无法在现有状态转换期间更新(例如在 `render` 或其他组件的构造函数中)

来自分类Dev

setstate在状态转换期间无法更新-反应

来自分类Dev

React - setState errir - 在状态转换期间无法更新

来自分类Dev

“无法在现有日期转换期间更新”在 react-native 中使用带有 redux 的 react-navigation

来自分类Dev

在现有状态转换期间无法更新

来自分类Dev

ReactJS | 在现有状态转换期间无法更新

来自分类Dev

反应错误:“无法在现有状态转换期间更新”

来自分类Dev

无法在现有状态转换期间更新 - 无论何时更改特定状态

来自分类Dev

具有 setInterval 的增量反应游戏:无法在现有状态转换期间更新

来自分类Dev

反应警告:在现有状态转换期间(例如在`render`中)无法更新

来自分类Dev

收到警告:渲染内部现有状态转换期间无法更新

来自分类Dev

反应:Apollo 客户端:无法在现有状态转换期间更新

来自分类Dev

获取计数时无法在现有状态转换期间更新

来自分类Dev

警告:无法在现有状态转换期间更新(例如在 `render` 或其他组件的构造函数中)

来自分类Dev

由于在渲染方法中调用了 onClick 方法,因此出现“无法在现有状态转换期间更新”错误

来自分类Dev

多步表单 - 无法在现有状态转换错误期间更新

来自分类Dev

反应不使用对象数组的setState更新状态

来自分类Dev

在XSLT转换期间省略未使用的XML元素

来自分类Dev

React / JavaScript,有人可以解释为什么setState在函数执行期间似乎无法正确更新状态吗?

来自分类Dev

使用android-gradle-plugin 3.6.0进行IR转换期间发生NullPointerException

来自分类Dev

在FLAC到ALAC转换期间使用FFmpeg嵌入图稿

来自分类Dev

不使用现有NSCoding方法实施NSCopying的任何理由

来自分类Dev

Coffeescript意外令牌非法,但不应有任何非法

来自分类Dev

没有 setState 的状态更新

来自分类Dev

如何使用useState挂钩更新对象的状态并保留现有元素?

来自分类Dev

如何在不使用任何转换的情况下从ssis中的执行sql任务插入,更新记录?

Related 相关文章

  1. 1

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

  2. 2

    警告:setState(...):在现有状态转换期间无法更新

  3. 3

    React Native / Redux-setState-在现有状态转换期间无法更新

  4. 4

    setState(...):无法在现有状态转换期间更新(例如在 `render` 或其他组件的构造函数中)

  5. 5

    setstate在状态转换期间无法更新-反应

  6. 6

    React - setState errir - 在状态转换期间无法更新

  7. 7

    “无法在现有日期转换期间更新”在 react-native 中使用带有 redux 的 react-navigation

  8. 8

    在现有状态转换期间无法更新

  9. 9

    ReactJS | 在现有状态转换期间无法更新

  10. 10

    反应错误:“无法在现有状态转换期间更新”

  11. 11

    无法在现有状态转换期间更新 - 无论何时更改特定状态

  12. 12

    具有 setInterval 的增量反应游戏:无法在现有状态转换期间更新

  13. 13

    反应警告:在现有状态转换期间(例如在`render`中)无法更新

  14. 14

    收到警告:渲染内部现有状态转换期间无法更新

  15. 15

    反应:Apollo 客户端:无法在现有状态转换期间更新

  16. 16

    获取计数时无法在现有状态转换期间更新

  17. 17

    警告:无法在现有状态转换期间更新(例如在 `render` 或其他组件的构造函数中)

  18. 18

    由于在渲染方法中调用了 onClick 方法,因此出现“无法在现有状态转换期间更新”错误

  19. 19

    多步表单 - 无法在现有状态转换错误期间更新

  20. 20

    反应不使用对象数组的setState更新状态

  21. 21

    在XSLT转换期间省略未使用的XML元素

  22. 22

    React / JavaScript,有人可以解释为什么setState在函数执行期间似乎无法正确更新状态吗?

  23. 23

    使用android-gradle-plugin 3.6.0进行IR转换期间发生NullPointerException

  24. 24

    在FLAC到ALAC转换期间使用FFmpeg嵌入图稿

  25. 25

    不使用现有NSCoding方法实施NSCopying的任何理由

  26. 26

    Coffeescript意外令牌非法,但不应有任何非法

  27. 27

    没有 setState 的状态更新

  28. 28

    如何使用useState挂钩更新对象的状态并保留现有元素?

  29. 29

    如何在不使用任何转换的情况下从ssis中的执行sql任务插入,更新记录?

热门标签

归档