Проблема с состоянием реакции (плохой setState?) При попытке показать компонент, состоящий из стилизованных компонентов

Question

Теперь я не совсем уверен, какое стечение вещей привело к этой проблеме, но давайте начнем с моего минимального воспроизведения.

Что я пытаюсь сделать

Я хочу показать стилизованный элемент, состоящий из различных «унаследованных» членов внутри модального окна. После щелчка по элементу модальное окно будет закрыто.

Фактические результаты

По какой-то причине элемент вызывает его onClickрано, как только вы нажмете кнопку, которая должна открывать модальное окно. Это только потому, что это стилизованный компонент (я думаю). Если я изменю элемент с Para к нормальному p, ведет себя правильно .

Мне интересно, что может вызвать это? Я слишком много вложил? Я получаю ошибку

      
Warning: Cannot update a component (`App`) while rendering a different component (`Styled(Styled(styled.div))`). To locate the bad setState() call inside `Styled(Styled(styled.div))`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Answer 1

Проблема здесь в том, что вы распространяете ... отдых в своем компоненте в стиле Para. Удалите его из ./Para.js, и он должен работать должным образом.