javascript - React, Typescript y Promesas

Estoy tratando de escribir un componente que llame a un servicio web y devuelva algunos datos de forma asincrónica a través de una promesa. Una vez que esta promesa se resuelva, me gustaría incluir los resultados en el método de renderizado de mi componente. Idealmente, creo que me gustaría que los resultados de la promesa se pasaran a otro componente. Es decir, el resultado de la promesa es una lista de elementos.

Una cosa más: estoy escribiendo este componente de React usando Typescript.

Actualmente tengo el siguiente código:

componentWillMount() {
    let fooProps = listGetter.returnListData().then((response) => {
        return response;
    });
}

public render(): JSX.Element {
    <div>
        <Foo ElementProperties={this.fooProps} />
    </div>
}

Sin embargo, este código produce un error y muestra "no se puede asignar un valor nulo a la propiedad".

¿Qué estoy haciendo mal? ¿Cuál es la mejor manera de manejar promesas y resolverlas en componentes en REACT?

¡Gracias!

Respuesta #1

Deberías usar el estado del componente.
Cambiar el estado resulta en un re-renderizado del componente, de manera similar a cómo cuando un componente cambia las propiedades de un hijo, esto resulta en que el hijo sea re-renderizado.

Algo como:

componentWillMount() {
    listGetter.returnListData().then((response) => {
        this.setState({
            fooProps: response.fooProps
        });
    });
}

public render(): JSX.Element {
    <div>
        <Foo ElementProperties={ this.state.fooProps } />
    </div>
}

Respuesta #2

Las promesas nunca devuelven sus valores, solo devuelven un Thenable para que puedas encadenarlas. El valor de retorno que buscas estará en el primer argumento de la función pasada a then

componentWillMount() {
    // bind the function to `this` so even if you don't use an
    // anonymous arrow function this call will work in the right context
    let updateComponent = this.updateComponent.bind(this);
    listGetter.returnListData().then((res) => {
        updateComponent(res);
    })
}

updateComponent(res) {
    this.setState({fooProps: res.fooProps})
}