ReactJS：警告：setState（…）：在现有状态转换期间无法更新
我想从我的渲染视图重构下面的代码：
<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange.bind(this,false)} >Retour</Button> 到绑定在构造函数中的版本。 原因是渲染视图中的绑定会给我带来性能问题，特别是在低端手机上。
我已经创build了下面的代码，但是我经常得到以下错误（大量）。 它看起来像应用程序进入一个循环：
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;
看起来你不小心在渲染方法中调用了handleButtonChange方法，你可能想要做onClick={() => this.handleButtonChange(false)} 。
如果你不想在onClick处理器中创buildlambdaexpression式，我想你需要有两个绑定的方法，每个参数一个。
在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>
我打电话时也遇到了同样的错误
this.handleClick = this.handleClick.bind(this);
在我的构造函数handleClick不存在时
（我删除了它，并且意外地在我的构造函数中留下了“this”这个绑定语句）。
解决scheme=删除“this”绑定语句。
如果您尝试在recompose中将参数添加到处理程序中，请确保在处理程序中正确定义了参数。 它本质上是一个curried函数，所以你要确保需要正确数量的参数。 这个页面有一个使用处理程序参数的好例子。
示例（来自链接）：
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)} /> ) } }
这样可以避免在处理程序中写一个匿名函数来修补问题，因为在处理程序中不提供足够的参数名称。
我只是有一个类似的问题，
我决定改变
this.setState({showType: TypeBITH });
对于
this.state.showType = this.state.ser? this.state.ser.TypeBITH: '';
看起来像“setState”创build一个循环依赖，当它用于构造函数，然后你有700个警告/错误。
