ReactJS:警告:setState(...):在現有狀態轉換期間無法更新


Answers

我打電話時也遇到了同樣的錯誤

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

在我的構造函數handleClick不存在時

(我刪除了它,並且意外地在我的構造函數中留下了這個“this”綁定語句)。

解決方案=刪除“this”綁定語句。

Question

我想從我的渲染視圖重構下面的代碼:

<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;



從react docs將參數傳遞給事件處理程序

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