Question

我有一个应用程序，该应用程序可以过滤按钮填充的某些测试，并触发下拉菜单。我遇到的问题是，我想通过onclick（）来选择下拉菜单中的项目，该项目会更新所选测试的状态。这很不正常，因为当我console.log（）onUpdateSelectedTest时，我可以看到状态正在更改和更新，但selectedTest仍未定义。任何示例，资源将不胜感激。

所有文件都只是片段。

这是我的TestActions.ts

export function UpdateSelectedTest(test: ITest): ToggleTestActionTypes {
  return {
    type: SELECT_TEST,
    payload: test
  };
}

这是我的Dropdown.tsx

import * as React from "react";
import {
  UpdateSelectedTestType,
  UpdateSelectedTest
} from "../actions/TestActions";
import { ITestState } from "../models/ITestState";

interface IProps {
  onUpdatetoggleTestState: typeof UpdateSelectedTestType;
  onUpdateSelectedTest: typeof UpdateSelectedTest;
  toggleTestState: ITestState;
}
export class Dropdown extends React.Component<IProps> {
  public render() {
    let tests = null;

    tests = this.props.toggleTestState.tests.filter(
      test => test.testType === this.props.toggleTestState.testType
    );
    return (
      <div>
        <ul className="nav nav-pills">
          <a
            className="nav-link dropdown-toggle"
            data-toggle="dropdown"
            href="#"
            role="button"
            aria-haspopup="true"
            aria-expanded="true"
          ></a>
          <div
            className="dropdown-menu show"
            x-placement="bottom-start"
            style={{
              position: "relative",
              willChange: "transform",
              top: "0px",
              left: "0px",
              transform: "translate(0px, 40px, 0px"
            }}
          >
            {tests.map(test => (
              <a
                onClick={() => this.props.onUpdateSelectedTest(test)}
                className="dropdown-item"
                href="#"
              >
                <div className="dropdown-divider"></div>
                {test.name}: {test.description}
              </a>
            ))}
          </div>
        </ul>
      </div>
    );
  }
}

问题在此处出现在Dropdown.tsx

{tests.map(test => (
                  <a
                    onClick={() => this.props.onUpdateSelectedTest(test)}
                    className="dropdown-item"
                    href="#"
                  >
                    <div className="dropdown-divider"></div>
                    {test.name}: {test.description}
                  </a>
  ))}

这是我的Apps.tsx 我将把onUpdateSelectedTest的状态粘贴到要显示的ListGroup中。

import * as React from "react";
import { ToggleButtonGroup } from "./components/ToggleButtonGroup";
import { Dropdown } from "./components/Dropdown";
import { ITestState } from "./models/ITestState";
import { connect } from "react-redux";
import { AppState } from "./store";
import { bindActionCreators } from "redux";
import {
  UpdateSelectedTestType,
  UpdateSelectedTest
} from "./actions/TestActions";
import { ListGroup } from "./components/ListGroup";

interface IProps {
  onUpdatetoggleTestState: typeof UpdateSelectedTestType;
  onUpdateSelectedTest: typeof UpdateSelectedTest;
  toggleTestState: ITestState;
}

class App extends React.Component<IProps> {
  render() {
    return (
      <div>
        <ToggleButtonGroup
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
        />

        <Dropdown
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
          onUpdateSelectedTest={UpdateSelectedTest}
        />

        <ListGroup
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
          onUpdateSelectedTest={UpdateSelectedTest}
        />
      </div>
    );
  }
}

const mapStateToProps = (state: AppState) => ({
  toggleTestState: state.toggle
});

const mapDispatchToProps = (dispatch: any) => {
  return {
    onUpdatetoggleTestState: bindActionCreators(
      UpdateSelectedTestType,
      dispatch
    ),
    onUpdateSelectedTest: bindActionCreators(UpdateSelectedTest, dispatch)
  };
};

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

这是我的toggleButtonReducers.ts

   const initialState: ITetsState = {
      testType: TestType.test1,
      test: dbTests,
      question: dbQuestion,
      selectedTest: undefined
      //selectedQuestion: undefined
    };

    export function toggleButtonReducer(
      state = initialState,
      action: ToggleTestActionTypes
    ) {
      switch (action.type) {
        case TOGGLE_TEST_TYPE:
          return {
            ...state,
            testType: action.payload
          };
        case SELECT_TEST:
          return {
            ...state,
            selectedTest: action.payload
          };
        default:
          return state;
      }
    }

Answer 1

您可能需要使用调度绑定动作创建器。目前，您正在打电话给他们，但尚未派遣他们。

例如，以下行：

onUpdateSelectedTest={UpdateSelectedTest}

应该是：

onUpdateSelectedTest={this.props.onUpdateSelectedTest}

Answer 2

在下面的代码中，probes值从何而来？在状态或道具中，我看不到任何探针变量。

{probes.map(test => (
                  <a
                    onClick={() => this.props.onUpdateSelectedTest(test)}
                    className="dropdown-item"
                    href="#"
                  >
                    <div className="dropdown-divider"></div>
                    {test.name}: {test.description}
                  </a>
  ))}

我认为，应该使用tests代替探测。

在redux中更新状态。未绑定功能？

2 个答案: