我正在尝试从渲染视图重构以下代码：
<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;
看起来您不小心在渲染方法中调用了
handleButtonChangeonClick={() => this.handleButtonChange(false)}如果您不想在 onClick 处理程序中创建 lambda，我认为您需要有两个绑定方法，每个参数一个。
在
constructorthis.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>
我在下面的代码中给出了一个通用示例以便更好地理解
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>
)
}
这通常发生在你打电话时
onClick={this.handleButton}onClick={this.handleButton问题在这里：
onClick={this.handleButtonChange(false)}当您将
this.handleButtonChange(false)value = falsethis.handleButtonChange(false)this.setState()解决方案是在 lambda 中传递函数：
onClick={() => this.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);}
如果您尝试在
recompose示例（来自链接）：
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)} />
)
}
}
这可以避免从处理程序中编写匿名函数来修补处理程序上未提供足够参数名称的问题。
问题肯定是在使用 onClick 处理程序渲染按钮时的 this 绑定。解决方案是在渲染时调用动作处理程序时使用箭头函数。像这样：
onClick={ () => this.handleButtonChange(false) }来自 React 文档 将参数传递给事件处理程序
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
在
render()一个很难找到的案例的例子： 当基于状态数据渲染多选 GUI 组件时，如果状态没有任何可显示的内容，则调用
resetOptions()明显的解决方法是在
resetOptions()componentDidUpdate()render()我打电话时也遇到同样的错误
this.handleClick = this.handleClick.bind(this);
在我的构造函数中，当 handleClick 不存在时
（我已经删除了它并且不小心在我的构造函数中留下了“this”绑定语句）。
解决方案=删除“this”绑定语句。
onClick函数必须经过一个返回handleButtonChange()方法的函数。否则它将自动运行，并以错误/警告结束。使用以下方法解决问题。
onClick={() => this.handleButtonChange(false)}我用来打开组件 Popover 的解决方案是 reactstrap（React Bootstrap 4 组件）。
class Settings extends Component {
constructor(props) {
super(props);
this.state = {
popoversOpen: [] // array open popovers
}
}
// toggle my popovers
togglePopoverHelp = (selected) => (e) => {
const index = this.state.popoversOpen.indexOf(selected);
if (index < 0) {
this.state.popoversOpen.push(selected);
} else {
this.state.popoversOpen.splice(index, 1);
}
this.setState({ popoversOpen: [...this.state.popoversOpen] });
}
render() {
<div id="settings">
<button id="PopoverTimer" onClick={this.togglePopoverHelp(1)} className="btn btn-outline-danger" type="button">?</button>
<Popover placement="left" isOpen={this.state.popoversOpen.includes(1)} target="PopoverTimer" toggle={this.togglePopoverHelp(1)}>
<PopoverHeader>Header popover</PopoverHeader>
<PopoverBody>Description popover</PopoverBody>
</Popover>
<button id="popoverRefresh" onClick={this.togglePopoverHelp(2)} className="btn btn-outline-danger" type="button">?</button>
<Popover placement="left" isOpen={this.state.popoversOpen.includes(2)} target="popoverRefresh" toggle={this.togglePopoverHelp(2)}>
<PopoverHeader>Header popover 2</PopoverHeader>
<PopoverBody>Description popover2</PopoverBody>
</Popover>
</div>
}
}
当我在返回 JSX 之前尝试在错误情况下
return null;