reactjs - 使用打字稿在上下文中确定状态类型

Question

在我计算 bmi 的项目中，我想将结果作为数组保存在一个状态中，并将它们保存在本地。

export type BmiContextState = {
    weight: number | undefined;
    height:number | undefined;
    open:boolean|undefined;
    alert:boolean|undefined;
    results:resultState;
    handleWeight(event: React.ChangeEvent<HTMLInputElement>): void;
    handleHeight(event: React.ChangeEvent<HTMLInputElement>): void;
    openModal(event: React.MouseEvent<HTMLButtonElement, MouseEvent>):void;
    openAlert(event: React.MouseEvent<HTMLButtonElement, MouseEvent>):void;
    calculate:(weight:number,height:number)=>number;
    bmi:(bmi:number)=>string;

  };

export interface resultState {
    results:{
      bmi:number,
      bmiResult:string,
    }
}

我定义了一个名为 resultstate 的类型，我希望我的对象在其中。我定义了这样的类型。

const contextDefaultValues: BmiContextState = {
  weight: 0,
  height: 0,
  result: (0,"obesite")[],
  open: false,
  alert: false,
  handleWeight() {},
  handleHeight() {},
  openModal() {},
  openAlert() {},
  calculate: (weight, height) => 0,
  bmi: (bmi) => "",
};

结果部分给出了错误，我应该如何定义它？

标签： reactjstypescriptreact-context

Answer 1

您必须更改result为results，然后您可以按如下方式对其进行初始化：

results: {results:{bmi:0,bmiResult: 'hello'}}

见工作样本