Question

我正在尝试从listGroup组件中的listItem打开onClick上的Modal组件。但是，我当前拥有的设置导致我的应用程序挂起，并且我无法单击该应用程序上的任何内容，或者状态无法更新，并且模式也不会呈现。

发生的另一件事很奇怪，当我通过控制台日志查看showModalState是什么时，状态发生了变化，但是当我检查react开发人员工具以查看其是否发生了变化时，它总是处于初始状态，即为false。

错误很可能来自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

我想将此留为评论，但目前我没有特权。

在您的app.ts mapStateToProps函数中，我想您希望showModalState成为

showModalState: state.modal.showModal

Answer 2

在Apps.tsx中，应该是this.props.showModalState.showModal

，而不是this.props.showModalState

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

嵌套组件之间的传递状态

2 个答案: