Добрый день, уважаемые. Никак не пойму, что происходит.
Есть родительский компонент:
var inputData = {
images: [
'images/first-variant.png',
'images/second-variant.png'
]
}
//.....
export default class Parent extends Component {
constructor(props) {
super(props);
this.state = {
page: 0,
inputData: undefined,
outputData: {
variant: 0
}
}
}
getInputData() {
// Показать, что тут будет вызов AJAX
setTimeout(() => {
this.setState({inputData: inputData, page: 1});
}, 1000);
}
goNext(outputData) {
let page = this.state.page;
let obj = Object.assign({}, this.state.outputData, outputData);
this.setState({page: ++page, outputData: obj});
}
componentDidMount() {
this.getInputData();
}
render() {
console.log(this.state.outputData);
switch (this.state.page) {
case 0:
return (<p></p>);
case 1:
return (<FirstPage
data={this.state.inputData.images}
goNext={this.goNext.bind(this)} />
);
case 2:
return (<div>Second page</div>);
}
}
}
И есть дочерний компонент:
export default class FirstPage extends Component {
constructor(props) {
super(props);
}
goNext(obj) {
this.props.goNext(obj);
}
render() {
let variants = this.props.data.map((item, index) => {
let returnedObject = {
variant: index
}
return (<img className="sample-img" onClick={this.goNext(returnedObject)} key={index} src={item} />);
});
return (<div>
<h1>Choose variant</h1>
{variants}
</div>);
}
}
Так вот когда я запускаю приложение, то сразу консоль мне выдает
Object
variant: 0
__proto__: Object
а через секунду ошибку:
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`.
и обьект:
Object
variant: 1
__proto__: Object
Почему метод вызвался сам по себе? Простите, может нубский вопрос, но я не могу разобраться в нём.
Заранее спасибо за ответы.
