reactjs – 使用React TypeScript设置状态

发布时间：2020-12-15 16:18:30 所属栏目：百科来源：网络整理

导读：我无法弄清楚如何使用TypeScript设置我的React组件的状态. 我正在做一个简单的Todo清单我有一个整个列表的组件：TodoList 我想在列表中播放一些可以玩的项目我想我会发送一个简单的数组作为TodoList组件的道具,然后立即将其设置为状态所以我有一些工作可以

我无法弄清楚如何使用TypeScript设置我的React组件的状态.

>我正在做一个简单的Todo清单
>我有一个整个列表的组件：TodoList
>我想在列表中播放一些可以玩的项目
>我想我会发送一个简单的数组作为TodoList组件的道具,然后立即将其设置为状态所以我有一些工作可以解决

import * as React from "react";
import { TodoItem,ITodoItem } from "../TodoItem";

interface ITodoListProps {
    items: ITodoItem[];
}

interface ITodoListState {
    stateItems: ITodoItem[];
}

export class TodoList extends React.Component<ITodoListProps,Partial<ITodoListState>> {
    constructor(props: ITodoListProps) {
        super(props);

        // Trouble figuring this part out
        //  I'd like to set the state to the list from the 
        //  props,as a seed.
        this.setState({
            stateItems: this.state.stateItems
        });
    }

    public render() {
        return (
            <div>
                <ul>
                    // This should probably be displaying the items from the state,and not the props.
                    {this.props.items.map((todo,i) => {
                        return <TodoItem key={i} name={todo.name} />
                    })}
                </ul>
            </div>
        );
    }
}

解决方法

在构造函数中设置初始状态时,只需将您想要的值赋给this.state：

constructor() {
  // ...
  this.state = { stateItems: ... /* initial value */ }
}

稍后在生命周期方法或事件侦听器中,您可以使用setState在构造函数中更改状态

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!