Typescript “我的状态”不会通过单击按钮重新渲染

我有一个测试项目列表，我试图根据按钮点击过滤。当前，我的初始状态显示test1的过滤器。但是，我想用按钮的onClick更新状态。我不知道为什么它没有更新。有人能给我一个解释/例子，或者给我指一个资源来帮助我理解这一点吗

提供的所有代码都是不同文件的片段。我之所以添加这些文件，是因为我认为其中一个文件有问题

这是我的ToggleButtongGroup.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);

  }
}

这是我的按钮

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();
  }
}

import React，{Component}来自“React”；
接口IProps{
名称：字符串；
切换：布尔；
handleSelectedTest（）：无效；
}
导出类ToggleButton扩展React.Component{
建造师（道具：IProps）{
超级（道具）；
this.handleSelectedTest=this.handleSelectedTest.bind（this）；
}
render（）{
返回(
{this.props.name}
);
}
手选测试（）{
如果（this.props.handleSelectedTest）this.props.handleSelectedTest（）；
}
}

您的

ToggleButtongGroup

未连接到redux，这意味着对

UpdateSelectedTestType

的调用不会影响redux存储，在传递redux操作

onUpdateToggleButtonState

时，这是正常的。考虑到这种结构，您需要更新以下功能：

public handleSelectedTest1 = () => {
    this.props.onUpdateToggleButtonState(testType.test1);
}

public handleSelectedTest2 = () => {
    this.props.onUpdateToggleButtonState(testType.test2);
}

---

我不太明白你的意思。如果我像你现在这样做。我得到了

TypeError:无法读取未定义的
以及toggleButton.tsx中的属性'onUpdateToggleButtonState'，这可能源于第一个错误：
handleSelectedProbe（）{if（this.props.handleSelectedProbe）this.props.handleSelectedProbe（）；}
我在问题中添加了
toggleButton.tsx
，这是因为您无法从未绑定函数访问this.props。您可以根据我的编辑使用bind（）更新您的函数。如果您不明白为什么我建议您阅读dispatch（）或bindActionCreators以及
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();
  }
}

public handleSelectedTest1 = () => {
    this.props.onUpdateToggleButtonState(testType.test1);
}

public handleSelectedTest2 = () => {
    this.props.onUpdateToggleButtonState(testType.test2);
}