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;

当前回答

如果您试图在重组中向处理程序添加参数，请确保在处理程序中正确地定义了参数。它本质上是一个咖喱函数，因此您希望确保需要正确数量的参数。本页提供了一个使用参数处理程序的好例子。

示例(摘自链接):

withHandlers({
  handleClick: props => (value1, value2) => event => {
    console.log(event)
    alert(value1 + ' was clicked!')
    props.doSomething(value2)
  },
})

为你的孩子HOC和在父

class MyComponent extends Component {
  static propTypes = {
    handleClick: PropTypes.func, 
  }
  render () {
    const {handleClick} = this.props
    return (
      <div onClick={handleClick(value1, value2)} />
    )
  }
}

这避免了在处理程序中编写匿名函数来修补没有在处理程序中提供足够参数名的问题。

2017-06-06 16:09:11

其他回答

通常你打电话的时候就会这样

onClick={this.handleButton()} -注意()代替:

onClick ={这个。注意这里我们在初始化函数时没有调用它

2019-10-11 22:35:25

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

<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

示例(摘自链接):

withHandlers({
  handleClick: props => (value1, value2) => event => {
    console.log(event)
    alert(value1 + ' was clicked!')
    props.doSomething(value2)
  },
})

为你的孩子HOC和在父

class MyComponent extends Component {
  static propTypes = {
    handleClick: PropTypes.func, 
  }
  render () {
    const {handleClick} = this.props
    return (
      <div onClick={handleClick(value1, value2)} />
    )
  }
}

这避免了在处理程序中编写匿名函数来修补没有在处理程序中提供足够参数名的问题。

2017-06-06 16:09:11

问题在这里:onClick={this.handleButtonChange(false)}

当你将this.handleButtonChange(false)传递给onClick时，你实际上是在调用value = false的函数，并将onClick设置为函数的返回值，这是未定义的。同样，调用this.handleButtonChange(false)，然后调用this.setState()，这会触发重新渲染，导致无限渲染循环。

解决方案是在lambda中传递函数:onClick={() => this.handleButtonChange(false)}。在这里，您将onClick设置为等于一个函数，该函数将在单击按钮时调用handleButtonChange(false)。

下面的例子可能会有所帮助:

function handleButtonChange(value){
  console.log("State updated!")
}

console.log(handleButtonChange(false))
//output: State updated!
//output: undefined

console.log(() => handleButtonChange(false))
//output: ()=>{handleButtonChange(false);}

2020-06-18 18:14:33

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

推荐文章

最新文章

标签