相关疑难解决方法(0)

我试图从我的渲染视图重构以下代码:

<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() …

我正在重写一些旧的ReactJS代码,并且无法修复此错误(错误在控制台中重复约1700次,DOM根本不渲染):

警告:setState(...):无法在现有状态转换期间更新(例如在内部render或另一个组件的构造函数中).渲染方法应该是道具和状态的纯函数; 构造函数的副作用是反模式,但可以移动到componentWillMount.

我是一个组件,它将状态传递给应该呈现一些控件的组件.根据单击的控件,状态应该更改,并且应该呈现新控件.

所以这是我的Container组件:

class TeaTimer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 120,
            countdownStatus: 'started'
        }
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.countdownStatus !== prevState.countdownStatus) {
            switch (this.state.countdownStatus) {
                case 'started':
                    this.startTimer();
                    break;
                case 'stopped':
                    this.setState({count:0});
            }
        }
    }

    componentWillUnmount() {
        clearInterval(this.timer);
        delete this.timer;
    }

    startTimer() {
        this.timer = setInterval(() => {
            let newCount = this.state.count -1;
            this.setState({
                count: newCount >= 0 ? newCount : 0
            });
            if(newCount === 0) {
                this.setState({countdownStatus: …