Блог

У меня есть приложение react redux, и модальное управление осуществляется через магазин redux. Поэтому, когда пользователь попадает на домашнюю страницу lt;Home /gt; , и lt;Modal /gt; монтируется в корне приложения. Оттуда всякий раз, когда пользователь нажимает кнопку, которая должна открыть модал, displayModal действие отправляется следующим образом:

 const handleModalButtonClick = () =gt; {  this.props.actions.displayModal({  className: 'modal-light',  component: () =gt; lt;FunctionalComponentThatUsesHooks /gt;  });  };  

Это то lt;FunctionalComponentThatUsesHooks /gt; , что должно открыться в модальном. Но это, похоже, не работает, когда переданный компонент является компонентом, использующим крючки, так как я вижу ошибку вызова недопустимых крючков:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:...

Компонент, использующий крючки, является функциональным компонентом, поэтому я знаю, что проблема не в этом. Я, кажется, не могу точно понять, почему это не работает. Может быть, это связано с тем, что модальный режим управляется через хранилище redux или с тем, как передается компонент? Есть какие-нибудь идеи? Спасибо

обновление: действие displayModal имеет тип SHOW , который просто добавляет данные в хранилище redux таким образом:

 case SHOW:  return {  ...state,  modal: action.payload  };  

в lt;Modal /gt; , используя функцию mapStateToProps , чтобы получить component из магазина redux. затем lt;Modal /gt; вызывается рендеринг this.modalBody , который будет отображать это component из хранилища redux следующим образом:

 get modalBody() {  const {component: InnerComponent} = this.props;   if (!InnerComponent) {  return null;  }   return (  lt;div className="modal-body" ref={this.modalBodyNode}gt;  lt;InnerComponent {...this.props} /gt;  lt;/divgt;  );  }  

это lt;FunctionalComponentThatUsesHooks /gt; не какой-то конкретный компонент, я пробовал использовать несколько различных компонентов, которые используют крючки, даже простые, которые используют только useState крючок, вот так:

 import React, {useState} from 'react';  const FunctionalComponentThatUsesHooks = (props) =gt; {  const [size] = useState(props.size);   return (  lt;button className={`btn-${size}`}gt;{props.children}lt;/buttongt;  ); };  export default FunctionalComponentThatUsesHooks;