Невозможно обновить во время существующего перехода состояния (например, внутри `render`)

Question

Я знал, что вопрос задают уже несколько раз, но до сих пор не знаю, как исправить мой код.Похоже, я не должен вызывать setState таким образом.Но я взял пример кода с сайта Material-UI, и это должно быть прямо?

class Dashboard extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            activeStep: 0,
        }
        this.handleStep = this.handleStep.bind(this);
    }

    handleStep(step) {
        this.setState({activeStep: step});
    };

    render(){
        const { classes, match } = this.props;
        const sprints = ['sprint 1', 'sprint 2', 'sprint 3'];
        const { activeStep } = this.state;

        return (
            <div className= {classes.root}>
                <div className = {classes.container} > 
                    <Stepper nonLinear activeStep={activeStep} alternativeLabel>
                        {sprints.map((label,index)=>
                            {
                                return (
                                    <Step key={label}>
                                        <StepButton
                                            onClick= {this.handleStep(index)}
                                        >
                                            {label}
                                        </StepButton>
                                    </Step>   
                                )
                            })
                        }
                    </Stepper>
                </div>
            </div>
        )
    }
}

Answer 1

Во-первых, если у вас нет параметра index, то вы используете способ связывания в порядке. Как это:

this.handleStep = this.handleStep.bind(this);
onClick= {this.handleStep}

Во-вторых, если у вас есть параметр внутри метода onClick, вам понадобится анонимная функция для передачи данных. Анонимная функция is () =>.

Итак, с функцией стрелки вам не нужно связывать внутри конструктора. И есть много опций:

//1
onClick={() => this.handleClick(index)}
//2
onClick={this.handleClick.bind(this, index)}

Answer 2

Ваш onClick из StepButton должен быть onClick={() => this.handleStep(index)}. Обратите внимание на функцию стрелки. Это передает функцию обратного вызова, которая будет запускаться при срабатывании onClick, тогда как ваш код вызывает this.handleStep во время render. В противном случае способ обработки обновления состояния будет вполне подходящим.