Question

我有一个要根据按钮单击过滤的测试项目列表。目前，我的初始状态显示了test1的过滤器。但是，我想通过按钮上的onClick更新状态。我不确定为什么它不更新。有人可以提供一个解释/示例或将我指向一个资源来帮助我理解这一点。

提供的所有代码都是不同文件的摘要。我只添加了这些文件，因为我认为其中一个做错了

这是我的ToggleButtonGroup.tsx

import { ToggleButton } from "./ToggleButton";
import * as React from "react";
import { testType } from "../actions/buttonTypes";
import { UpdateSelectedType } from "../actions/buttonAction";
import { IToggleButtonState } from "../models/IToggleButtonState";

interface IProps {
  onUpdateToggleButtonState: typeof UpdateSelectedType;
  toggleButtonState: IToggleButtonState;
}

export class ToggleButtonGroup extends React.Component<IProps> {
  public render() {
    let tests = null;

      tests = this.props.toggleButtonState.probes.filter(
      test => test.probeType === this.props.toggleButtonState.testType
    );

    console.log(tests);
    console.log(this.props.toggleButtonState.testType);

    return (
      <div>
        <ToggleButton
          name={"Test 1"}
          toggle={true}
          handleSelectedTest={this.handleSelectedTest1}
        />

        <ToggleButton
          name={"Test 2"}
          toggle={true}
          handleSelectedProbe={this.handleSelectedTest2}
        />

        <ul>
          {tests.map(probe => (
            <li>{test.title}</li>
          ))}
        </ul>
      </div>
    );
  }

  public handleSelectedTest1() {
    UpdateSelectedTestType(testType.test1);
  }

  public handleSelectedTest2() {
    UpdateSelectedTestType(testType.test2);

  }
}

这是我的App.tsx

import * as React from "react";
import { ToggleButtonGroup } from "./components/ToggleButtonGroup";
import { IToggleButtonState } from "./models/IToggleButtonState";
import { connect } from "react-redux";
import { AppState } from "./store";
import { bindActionCreators } from "redux";
import { UpdateSelectedProbeType } from "./actions/buttonAction";

interface IProps {
  onUpdateToggleButtonState: typeof UpdateSelectedTestType;
  toggleButtonState: IToggleButtonState;
}

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

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

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

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

这是我的toggleButtonReducer.ts

import {
  ToggleActionTypes,
  TOGGLE_TEST_TYPE,
  TestType
} from "../actions/buttonTypes";
import { IToggleButtonState } from "../models/IToggleButtonState";
import { dbTests } from "../actions/buttonAction";

const initialState: IToggleButtonState = {
  testType: testType.test1,
  test: dbTests,
};

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

这是我的buttonAction.ts

export function UpdateSelectedTestType(
  testType: TestType
): ToggleActionTypes {
  return {
    type: TOGGLE_TEST_TYPE,
    payload: testType
  };
}

这是我的ToggleButton.tsx

import React, { Component } from "react";
interface IProps {
  name: string;
  toggle: boolean;
  handleSelectedTest(): void;
}

export class ToggleButton extends React.Component<IProps> {
  constructor(props: IProps) {
    super(props);
    this.handleSelectedTest = this.handleSelectedTest.bind(this);
  }
  render() {
    return (
      <button onClick={this.handleSelectedTest}>{this.props.name}</button>
    );
  }

  handleSelectedTest() {
    if (this.props.handleSelectedTest) this.props.handleSelectedTest();
  }
}

Answer 1

您的data %>% drop_na()未连接到redux，这意味着对gethostbyaddr($_SERVER['REMOTE_ADDR'])的调用不会影响redux存储，这是可以的，因为您正在传递redux操作ToggleButtonGroup。考虑到这种结构，您需要更新以下功能：

UpdateSelectedTestType

单击按钮不会重新显示我的状态

1 个答案: