javascript - recargar - ¿con qué método del ciclo de vida podemos optimizar render?

Representación Reaccione componentes con promesas dentro del método de representación

Question

Tengo un componente que obtiene una colección de elementos como accesorios y map asigna a una colección de componentes que se representan como elementos secundarios de un componente principal. Utilizamos imágenes almacenadas en WebSQL como conjuntos de bytes. Dentro de la función de map obtengo una identificación de imagen del elemento y hago una llamada asíncrona al DAL para obtener la matriz de bytes de la imagen. Mi problema es que no puedo propagar la promesa en React, ya que no fue diseñada para tratar las promesas en la representación (no tan lejos como puedo decir de todos modos). Vengo de un fondo C# , así que creo que estoy buscando algo como la palabra clave en await para volver a sincronizar el código ramificado.

La función de map ve así (simplificada):

var items = this.props.items.map(function (item) {
        var imageSrc = Utils.getImageUrlById(item.get(''ImageId'')); // <-- this contains an async call
        return (
            <MenuItem text={item.get(''ItemTitle'')}
                      imageUrl={imageSrc} />
       );
    });

y el método getImageUrlById se ve así:

getImageUrlById(imageId) {
    return ImageStore.getImageById(imageId).then(function (imageObject) { //<-- getImageById returns a promise
       var completeUrl = getLocalImageUrl(imageObject.StandardConImage);
       return completeUrl;
    });
}

Esto no funciona, pero no sé qué necesito modificar para que esto funcione. Intenté agregar otra promesa a la cadena, pero luego recibí un error porque mi función de procesamiento devuelve una promesa en lugar de JSX legal. Estaba pensando que tal vez necesito aprovechar uno de los métodos del ciclo de vida React para obtener los datos, pero como necesito los props para estar allí, no puedo entender dónde puedo hacer esto.

Answer 1

O puede usar react-promise:

Instala el paquete:

npm i react-promise

Y su código se verá así:

import Async from ''react-promise''

var items = this.props.items.map(function (item) {
    var imageSrc = Utils.getImageUrlById(item.get(''ImageId'')); // <-- this contains an async call
    return (
        <Async promise={imageSrc} then={(val) => <MenuItem text={item.get(''ItemTitle'')} imageUrl={val}/>} />    
    );
});

Documentos completos: https://github.com/capaj/react-promise

Answer 2

render() método render() debe representar la interfaz de usuario de this.props y this.state, por lo que para sincronizar los datos de carga, puede usar this.state para almacenar la imageId:imageUrl .
Luego, en su método componentDidMount() , puede completar imageUrl desde imageId. Entonces el método render() debe ser puro y simple al representar el objeto this.state

Aquí hay un código de muestra rápido:
Tenga en cuenta que this.state.imageUrls se rellena de forma asincrónica, por lo que el elemento de la lista de imágenes representadas aparecerá una por una después de que se this.state.imageUrls su url. También puede inicializar this.state.imageUrls con toda la identificación o índice de la imagen (sin URL), de esta manera puede mostrar un cargador cuando se carga esa imagen.

constructor(props) {
    super(props)
    this.state = {
        imageUrls: []
    };
}

componentDidMount() {
    var self = this;
    this.props.items.map((item) => {
        ImageStore.getImageById(item.imageId).then(image => {
            var mapping = {id: item.imageId, url: image.url};
            var newUrls = self.state.imageUrls.slice();
            newUrls.push(mapping);

            self.setState({
                imageUrls: newUrls
            });
        })
    });
}

render() {
    return (<div>
        this.state.imageUrls.forEach(mapping => {
            <div>id: {mapping.id}, url: {mapping.url}`</div>
        })
        </div>
    );
}