ReactJS:警告:setState(…):不能在现有状态转换期间更新

我试图从我的渲染视图重构以下代码:

<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange.bind(this,false)} >Retour</Button>

到绑定在构造函数内的版本。原因是渲染视图中的绑定会给我带来性能问题，尤其是在低端手机上。

我已经创建了以下代码，但我经常得到以下错误(很多)。看起来应用程序进入了一个循环:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

下面是我使用的代码:

var React = require('react');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Button = require('react-bootstrap/lib/Button');
var Form = require('react-bootstrap/lib/Form');
var FormGroup = require('react-bootstrap/lib/FormGroup');
var Well = require('react-bootstrap/lib/Well');

export default class Search extends React.Component {

    constructor() {
        super();

        this.state = {
            singleJourney: false
        };

        this.handleButtonChange = this.handleButtonChange.bind(this);
    }

    handleButtonChange(value) {
        this.setState({
            singleJourney: value
        });
    }

    render() {

        return (
            <Form>

                <Well style={wellStyle}>

                    <FormGroup className="text-center">

                        <ButtonGroup>
                            <Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange(false)} >Retour</Button>
                            <Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChange(true)} >Single Journey</Button>
                        </ButtonGroup>
                    </FormGroup>

                </Well>

            </Form>
        );
    }
}

module.exports = Search;

当前回答

为了更好地理解，我给出了一个通用的例子，在下面的代码中

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment()} <------ calling the function
          onDecrement={this.props.decrement()} <-----------
          onIncrementAsync={this.props.incrementAsync()} />
      </div>
    )
  }

当提供道具时，我直接调用函数，这将有一个无限循环执行，并会给你那个错误，删除函数调用一切正常工作。

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment} <------ function call removed
          onDecrement={this.props.decrement} <-----------
          onIncrementAsync={this.props.incrementAsync} />
      </div>
    )
  }

2018-10-24 09:25:13

其他回答

将参数传递给事件处理程序

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

2018-01-03 05:21:29

我打电话的时候也出现了同样的错误

this.handleClick = this.handleClick.bind(this);

当handleClick不存在时，在构造函数中

(我擦除了它，不小心在构造函数中留下了“this”绑定语句)。

解决方案=删除“this”绑定语句。

2017-09-06 10:19:34

问题当然是这个绑定，而租用按钮与onClick处理程序。解决方案是在渲染时调用动作处理程序时使用箭头函数。是这样的: onClick={() => this.handleButtonChange(false)}

2018-09-04 08:15:45

在render()调用中所做的任何状态更改都将发出相同的警告。

一个很难找到的例子: 在基于状态数据呈现多选GUI组件时，如果状态没有任何显示，则调用resetOptions()被认为是该组件的状态更改。

显而易见的修复方法是在componentDidUpdate()中执行resetOptions()而不是render()。

2018-11-27 12:08:34

为了更好地理解，我给出了一个通用的例子，在下面的代码中

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment()} <------ calling the function
          onDecrement={this.props.decrement()} <-----------
          onIncrementAsync={this.props.incrementAsync()} />
      </div>
    )
  }

当提供道具时，我直接调用函数，这将有一个无限循环执行，并会给你那个错误，删除函数调用一切正常工作。

render(){
    return(
      <div>

        <h3>Simple Counter</h3>
        <Counter
          value={this.props.counter}
          onIncrement={this.props.increment} <------ function call removed
          onDecrement={this.props.decrement} <-----------
          onIncrementAsync={this.props.incrementAsync} />
      </div>
    )
  }

2018-10-24 09:25:13

ReactJS:警告:setState(…):不能在现有状态转换期间更新

推荐文章

最新文章

标签