reactjs - Angi tilstanden med React + TypeScript

Jeg klarer ikke å finne ut hvordan jeg skal sette tilstanden til min React-komponent med TypeScript.

  • Jeg lager en enkel gjøremålsliste
  • Jeg har en komponent for hele listen: TodoList
  • Jeg vil legge til noen elementer i listen for å leke med
  • Jeg tenkte jeg skulle sende inn et enkelt array som props til TodoList-komponenten, og deretter umiddelbart sette det som state slik at jeg har noe å jobbe ut fra
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>
        );
    }
}

Svar #1

Du må sende props.items til tilstanden når du konstruerer den opprinnelige tilstanden:

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

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

Svar #2

I konstruktøren, når du setter starttilstanden, tilordne ganske enkelt verdien du ønsker til this.state:

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

Senere i livssyklusmetodene eller hendelseslytterne kan du endre tilstanden på samme måte som du gjør i konstruktøren med setState

Relaterte artikler