Javascript 如何使用React中的按钮切换项目列表？

我正在尝试使用切换按钮根据特定条件筛选项目列表。假设我们的列表是一个程序员列表，每个人都知道java、javascript或java和javascript。首先，我们有一个所有程序员的列表和一个显示“了解java”和另一个显示“了解javascript”的切换开关，我们获取原始列表并对其进行过滤，以便根据按下的切换返回了解java或了解javascript的程序员。虽然有两个不同的过滤器，但每次都可以按下，它将返回整个原始列表。如果没有按下任何按钮，也会显示整个原始程序员列表。到目前为止，我只研究了一个开关，它的功能在技术上是可行的，但有缺陷。下面是一些要演示的代码：

    handleToggleJavaProgrammersClick = () => {
    const { programmers } = this.state;
    // let's assume that programmers is an array of objects with the boolean properties
    // knowsJava and knowsJavascript
    const javaOnlyProgrammers = programmers.filter(
        (programmer) => !!programmer.knowsJava && !programmer.knowsJavascript,
    );

    this.setState({
        programmers: javaOnlyProgrammers;
    })

    return javaOnlyProgrammers;
};

然后，当我们呈现一个按钮组件时，它的onClick属性接受this.handleToggleJavaProgrammersClick。问题是，假设我们想要为

handleToggleJavascriptProgrammersClick

执行相同类型的函数。然后，当我们将

程序员的状态设置为
javascriptOnlyProgrammers
时，它将采用当前状态，即我们筛选出的只懂java的程序员列表，并对其进行进一步筛选；它永远不会返回到原始列表，只会无限过滤

有没有一种方法可以在不总是设置状态的情况下实现这一点？也许可以设置一个布尔值来确定按钮是否被单击？任何帮助都将不胜感激。提前谢谢
 为什么不向您的状态添加一个新值，比如，
javaOnlyProgrammers

class Toggler extends Component {
  state = {
    programmers: [],
    javaOnlyProgrammers :[]
  }
}

然后在你的点击处理程序过滤器中，就像你一直在做的那样。而不是返回javaOnlyProgrammers，
setState
：

handleToggleJavaProgrammersClick = () => {
  this.setState({
    javaOnlyProgrammers: this.state.programmers.filter(
        (programmer) => !!programmer.knowsJava && !programmer.knowsJavascript,
    );
  });
};

您不应该从处理程序返回值，处理程序大多是空函数。在react应用程序中，状态将决定UI的外观。所以只要看看你需要它的地方