ReactJS:警告: setState(...)：在现有状态转换期间无法更新
ReactJS:警告: setState(...)：在现有状态转换期间无法更新
提问于 2016-05-23 17:29:38
我正在尝试从我的渲染视图重构以下代码：
<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;回答 8
Stack Overflow用户
回答已采纳
发布于 2016-05-23 17:52:57
看起来你不小心在你的render方法中调用了handleButtonChange方法，你可能想要做onClick={() => this.handleButtonChange(false)}。
如果您不想在onClick处理程序中创建lambda，我认为您需要有两个绑定方法，每个参数一个。
在constructor中
this.handleButtonChangeRetour = this.handleButtonChange.bind(this, true);
this.handleButtonChangeSingle = this.handleButtonChange.bind(this, false);在render方法中：
<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChangeSingle} >Retour</Button>
<Button href="#" active={this.state.singleJourney} onClick={this.handleButtonChangeRetour}>Single Journey</Button>Stack Overflow用户
发布于 2018-10-24 17:25:13
为了更好地理解，我在下面的代码中给出了一个通用示例
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>
)
}Stack Overflow用户
发布于 2017-06-07 00:09:12
如果您尝试向recompose中的处理程序添加参数，请确保在处理程序中正确定义了参数。它本质上是一个curried函数，因此您需要确保需要正确数量的参数。This page has a good example of using arguments with handlers.
示例(来自链接)：
withHandlers({
handleClick: props => (value1, value2) => event => {
console.log(event)
alert(value1 + ' was clicked!')
props.doSomething(value2)
},
})对于您的子目录和父目录
class MyComponent extends Component {
static propTypes = {
handleClick: PropTypes.func,
}
render () {
const {handleClick} = this.props
return (
<div onClick={handleClick(value1, value2)} />
)
}
}这避免了在处理程序之外编写匿名函数来修补未在处理程序上提供足够参数名的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37387351
复制相关文章
相似问题