Передача состояния между вложенными компонентами

Question

Я пытаюсь открыть модальный компонент на onClick из listItem в компоненте listGroup.Однако имеющаяся у меня настройка либо приводит к зависанию моего приложения, и я не могу ничего щелкнуть по приложению, либо состояние не обновляется и модал не отображается.

Еще одна странная вещь, которая возникаетэто когда я консольный журнал, чтобы увидеть, что такое showModalState, состояние меняется, но когда я проверяю инструменты реагирования разработчика, чтобы увидеть, если оно изменилось, оно всегда в исходном состоянии, которое ложно.

Ошибка более чем вероятнопроисходит от ModalActions.ts или ModalReducer.ts.Примечание. Весь приведенный ниже код является всего лишь фрагментом кода.Я пропустил много вещей и оставил только то, что, как я думал, могло быть проблемой.

Это мой ModalTypes.ts

export const SHOW_MODAL = "SHOW_MODAL";

interface ShowModal {
  type: typeof SHOW_MODAL;
  payload: boolean;
}

export type ModalActionTypes = ShowModal;

Это мой ModalActions.ts

import { SHOW_MODAL, ModalActionTypes } from "./ModalTypes";

export function UpdateModal(modal: boolean): ModalActionTypes {
  return {
    type: SHOW_MODAL,
    payload: modal
  };
}

Это мой IModalState.ts

export interface IModalState {
  showModal: boolean;
}

Это мой ModalReducer.ts.** Я, вероятно, сделаю действия и типы, чтобы скрыть модальные сообщения

import { ModalActionTypes, SHOW_MODAL } from "../actions/ModalTypes";
import { IModalState } from "../models/IModalState";

const initialState: IModalState = {
  showModal: false
};

export function modalReducer(state = initialState, action: ModalActionTypes) {
  switch (action.type) {
    case SHOW_MODAL:
      return {
        ...state,
        showModal: action.payload
      };
    default:
      return state;
  }
}

Это мой App.tsx

      <ListGroup
          onUpdateModal={this.props.onUpdateModal}
          showModalState={this.props.showModalState}
        />


const mapStateToProps = (state: AppState) => ({
  showModalState: state.modal
});

const mapDispatchToProps = (dispatch: any) => {
  return {
    onUpdateModal: bindActionCreators(UpdateModal, dispatch)
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Это мой ListGroup.tsx

import { UpdateModal } from "../actions/ModalActions";
import { IModalState } from "../models/IModalState";

interface IProps {
  onUpdateModal: typeof UpdateModal;
  showModalState: IModalState;
}

// interface IState {
//   showModal: boolean;
// }

export class ListGroup extends React.Component<IProps> {
  // IState
  // public state: IState = {
  //   showModal: false
  // };

  // showModal = () => {
  //   // Show the modal
  //   this.setState({ showModal: true });
  // };

  public render() {
    // const { showModal } = this.state;

    return (
      <div>
        <ul
          className="list-group"
          style={{
            marginTop: "20px",
            display: "inline-block"
          }}
        >
          {filterTests.map(filterTest => (
            <li
              className="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              onClick={() => {
                this.props.onUpdateModal(true);
                console.log(this.props.onUpdateModal(true));
                console.log(this.props.showModalState);
                this.props.onUpdateSelectedTest(filterTest);

                // this.showModal();
              }}
            >
              {filterTest.companyPN}: {filterTest.description}
            </li>
          ))}
        </ul>
        {/* Show the modal if showModal is true */}
        {this.props.showModalState && (
          <TestGroup
            testState={this.props.testState}
            onUpdateSelectedWedge={this.props.onUpdateSelectedWedge}
          />
        )}
      </div>
    );
  }
}

Это мой TestGroup.tsx

interface IProps {
  onUpdateModal: typeof UpdateModal;
  showModalState: IModalState;
}

export class TestGroup extends React.Component<IProps> {
  // hideModal = () => {
  //   this.setState({
  //     showModal: !this.props.showModal
  //   });
  // };

  public render() {
    return (
      <div>
        <div className="modal" style={{ display: "inline-block" }}>
          <div className="modal-dialog" role="document">
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title"></h5>
                  <button
                    type="button"
                    className="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>

                <div className="modal-body">
                </div>

                <div className="modal-footer">
                  <button
                    // onClick={() => {
                    //   this.hideModal();
                    // }}
                    type="button"
                    className="btn btn-secondary"
                    data-dismiss="modal"
                  >
                    Close
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default TestGroup;

Answer 1

В файле Apps.tsx вместо this.props.showModalState это должно было быть this.props.showModalState.showModal

{this.props.showModalState.showModal && (
          <TestGroup
            testState={this.props.testState}
            onUpdateSelectedWedge={this.props.onUpdateSelectedWedge}
          />
        )}

Answer 2

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

В вашем app.ts mapStateToProps функция, я думаю, вы хотите, чтобы showModalState было

showModalState: state.modal.showModal