使用 React + TypeScript 设置状态

Question

我不知道如何使用 TypeScript 设置我的 React 组件的状态。

• 我正在制作一个简单的待办事项列表
• 我有一个用于整个列表的组件：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>
        );
    }
}

Answer 1

在构造初始状态时需要将props.items传递给状态：

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

        this.state = {
            stateItems: props.items
        };
    }
    ...
}

Answer 2

在构造函数中设置initial状态时，只需将你想要的值赋值给this.state：

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

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