React类组件：单函数实现状态数组元素增删及类型转换

直接上可运行的实现方案，解决你遇到的数组方法报错问题：

核心函数实现 #

toggleMember(targetId) {
  // 将传入的整数ID转为字符串，匹配后端要求的string[]类型
  const targetStrId = String(targetId);
  
  // 使用函数式更新state，确保拿到最新的状态值
  this.setState(prevState => {
    const currentSelected = prevState.selectedMembers;
    
    // 判断目标ID是否已存在于数组中
    if (currentSelected.includes(targetStrId)) {
      // 存在则移除，返回新数组（不直接修改原state）
      return {
        selectedMembers: currentSelected.filter(id => id !== targetStrId)
      };
    } else {
      // 不存在则添加，用扩展运算符生成新数组
      return {
        selectedMembers: [...currentSelected, targetStrId]
      };
    }
  });
}

完整类组件示例 #

import React from 'react';

class MemberSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedMembers: []
    };
    // 绑定this上下文，避免调用时this指向异常
    this.toggleMember = this.toggleMember.bind(this);
  }

  toggleMember(targetId) {
    const targetStrId = String(targetId);
    this.setState(prevState => {
      const currentSelected = prevState.selectedMembers;
      if (currentSelected.includes(targetStrId)) {
        return {
          selectedMembers: currentSelected.filter(id => id !== targetStrId)
        };
      } else {
        return {
          selectedMembers: [...currentSelected, targetStrId]
        };
      }
    });
  }

  // 示例：点击按钮触发切换
  render() {
    return (
      <div>
        <button onClick={() => this.toggleMember(1)}>切换成员ID:1</button>
        <button onClick={() => this.toggleMember(2)}>切换成员ID:2</button>
        <p>已选中成员: {JSON.stringify(this.state.selectedMembers)}</p>
      </div>
    );
  }
}

export default MemberSelector;

为什么你之前会遇到is not a function错误？ #

最常见的原因是直接修改了state中的原数组（比如用push、splice这类会改变原数组的方法），React状态是不可变的，直接修改会导致状态引用未更新，React无法触发重渲染，甚至会意外将数组类型改成其他类型（比如不小心赋值成了单个字符串），后续调用数组方法（如includes、indexOf）自然会报错。

关键注意事项 #

• 始终通过生成新数组来更新state，不要修改原数组（用filter、扩展运算符[...]都是安全的方式）
• 使用setState的函数式更新（传入带prevState的回调），避免异步更新导致的状态不一致问题
• 统一将整数ID转为字符串后再存储，完全匹配后端C#服务要求的string[]类型

内容的提问来源于stack exchange，提问作者kevmull