时间戳

首页 > 解决方案 > 使用 TypeScript 推送到状态数组 React

reactjs - 使用 TypeScript 推送到状态数组 React

问题描述

我正在尝试通过 addTask 方法在我的任务数组中添加一个任务对象，此方法获取先前的状态并添加新任务，它适用于JSX但在我使用 TypeScript 时不起作用。我得到的错误是

Type 'ITask[] | undefined' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.  TS2569

import React, { Fragment } from 'react';

interface ITask {
    name: string;
    done: boolean;
}

interface IProps {

}

interface IState {
    newTask?: string;
    tasks?: Array<ITask>;
}

class App extends React.Component<IProps, IState>{
    constructor(props: any) {
        super(props);
        this.state = {
            newTask: '',
            tasks: []
        }
    }


    addTask(name:string) {
        this.setState(prevState => ({
            tasks: [...prevState.tasks, {name, done: false}]
        }));
    }

    render() {
        return (
            <Fragment>
            </Fragment>
        );
    }
}

标签： reactjstypescript

解决方案

您可能必须将新对象显式键入为ITask，以告诉 TypeScript 编译器您正在将类型对象推ITask送到tasks状态。

此外，tasks是可选的。[]解决此问题的一种方法是在传播时设置默认值（空数组）。

addTask(name:string) {
  const newTask: ITask = {name, done: false}
  this.setState((prevState) => ({
    tasks: [...(prevState.tasks ?? []), newTask]
  }));
}

鉴于tasks（甚至newTask）实际上在构造函数上分配了一个值，实际上不需要在您的IState界面上将其标记为可选。

interface IState {
  newTask: string;
  tasks: Array<ITask>;
}

这将使您无需在设置状态时检查是否tasks是。undefined

推荐阅读