Из-за чего появляется ошибка при setState?

Question

[Jedi]

Добрый вечер. Прошу вас мне помочь разобраться с ошибкой.

Ошибка возникает когда я вешаю на onClick setState.

Вот ссылка на компонент: https://pastebin.com/AeBqKL66

Ошибка: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Спасибо!

Answer 1

[abberati]

Кроме проблемы, с которой вы уже столкнулись, в вашем коде есть ещё одна проблема: не следует обращаться к текущему стейту внутри функции setState, т.к. эта фукнция асинхронная, а значит нет гарантии, что this.state будет тем же самым на момент применения стейта. Звучит сложно, но оно и на самом деле не очень просто устроено. Вот простейший пример в песочнице:
https://jsfiddle.net/n5u2wwjg/147060/

Обратите внимание, что "-2" работает так, как ожидается. А "+2" - нет.

Comments

[Jedi]

Спасибо большое!

Answer 2

[0xD34F]

onClick={ this.setState({isOpen: !this.state.isOpen}) }

А может, всё-таки стоит засунуть вызов setState в функцию?

Comments

[Jedi]

 Только что додумался до этого...)

Спасибо в любом случае.

[Jedi]

onClick={ () => { this.setState({isOpen: !this.state.isOpen}) } }