使用TypeScript进行推送状态数组反应
使用TypeScript进行推送状态数组反应
提问于 2020-04-14 12:21:56
我正在尝试通过addTask方法在tasks数组中添加一个任务对象，该方法获取之前的状态并添加新任务，它适用于JSX，但不适用于我使用TypeScript的情况。我得到的错误是
Type 'ITask[] | undefined' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators. TS2569import 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>
);
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2020-04-14 12:52:26
您可能需要显式地将新对象类型设置为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。
Stack Overflow用户
发布于 2020-04-14 12:57:27
在将{name, done: false}类型添加到数组之前，必须将其类型强制转换为ITask：
tasks: [...(prevState.tasks ?? []), {name: name, done: false} as ITask]Stack Overflow用户
发布于 2020-04-14 12:55:17
您应该在要传递的对象中正确声明这两个字段。
// use: {name: name, done: false}
addTask(name:string) {
this.setState(prevState => ({
tasks: [...prevState.tasks, {name: name, done: false}]
}));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61200631
复制相关文章
相似问题
腾讯云开发者
