React开发触发state[i].setState is not a function错误求助

错误原因 #

你遇到的state[i].setState is not a function报错，核心原因是：
this.state.ids数组中存储的都是普通业务数据对象，只有React类组件实例才拥有setState方法，普通JS对象不存在该方法，直接调用必然报错。
同时你原有代码中的for循环逻辑存在提前中断的问题，第一个遍历项未匹配目标分支时就会直接return，后续元素不会被遍历，功能逻辑本身也不成立。

修复方案 #

React类组件修改state必须调用组件实例的this.setState方法，对于数组类型的state，需要生成新的数组整体替换，不能直接修改原state内部的属性。

1. 调整更新函数 #

将changeActiveField改为类内部的箭头函数，直接操作组件实例的state：

changeActiveField = (targetId) => {
  const currentIds = this.state.ids;
  // 已激活项与点击项id一致，无需操作
  const activeItem = currentIds.find(item => item.active);
  if (activeItem?.id === targetId) {
    alert(`if ${activeItem.active} ${activeItem.id}`);
    return;
  }
  // 生成新的ids数组，修改对应激活状态
  const newIds = currentIds.map(item => {
    if (item.active) return {...item, active: false};
    if (item.id === targetId) return {...item, active: true};
    return item;
  })
  // 调用组件setState更新状态
  this.setState({ ids: newIds });
}

2. 调整调用逻辑 #

修改onClick绑定的代码，同时补全map遍历必填的key属性，避免React警告：

<div className="thumbs">
  {this.state.ids.map((i) => (
    <React.Fragment key={i.id}>
      <Image
        className="carouselitem"
        rounded
        onClick={() => this.changeActiveField(i.id)}
        src={`http://img.youtube.com/vi/${i.id}/hqdefault.jpg`}
        size="small"
      />
      <h2>
        {i.id} {i.active ? "true" : "false"}
      </h2>
    </React.Fragment>
  ))}
</div>

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