React/TypeScript中无法动态调用setState的问题求助

这大概率是TypeScript的类型检查在搞事情！当你直接用字符串字面量"mostPopContentCount"作为state的key时，TypeScript能明确识别这个key属于你的组件state；但当你把这个key存到一个类型为string的变量里时，TypeScript无法确定这个变量对应的key是否真的存在于你的state定义中，所以会抛出编译错误。

下面给你两种可行的解决方案：

方案1：明确定义State接口并约束变量类型 #

先给你的组件State定义一个接口，然后让动态key变量的类型为keyof State，这样TypeScript就能确保这个变量是合法的state key：

// 定义组件State的接口
interface MyComponentState {
  mostPopContentCount: number;
  // 这里可以添加其他state属性
}

class MyComponent extends React.Component<{}, MyComponentState> {
  // 初始化state
  state: MyComponentState = {
    mostPopContentCount: 0
  };

  render() {
    // 约束name的类型为MyComponentState的key类型
    const name: keyof MyComponentState = "mostPopContentCount";
    
    return (
      <a href="javascript:void(0)" onClick={() => {
        this.setState(prevState => {
          return { [name]: prevState[name] + 10 };
        });
      }}>
        Load 10 more rows
      </a>
    );
  }
}

方案2：使用类型断言快速解决 #

如果不想定义完整的State接口，也可以用类型断言直接告诉TypeScript这个变量是合法的state key：

render() {
  // 断言name是当前组件state的key类型
  const name = "mostPopContentCount" as keyof typeof this.state;
  
  return (
    <a href="javascript:void(0)" onClick={() => {
      this.setState(prevState => {
        return { [name]: prevState[name] + 10 };
      });
    }}>
      Load 10 more rows
    </a>
  );
}

额外小建议 #

尽量避免使用javascript:void(0)这种写法，语义化更优的方式是用<button>元素，或者在<a>的onClick里阻止默认行为：

<button onClick={() => {
  this.setState(prevState => ({ [name]: prevState[name] + 10 }));
}}>
  Load 10 more rows
</button>

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