render 메서드 내에서 promise를 사용하여 React 구성 요소 렌더링

render 메서드 내에서 promise를 사용하여 React 구성 요소 렌더링

---

항목 모음을 소품으로 가져오고 map부모 구성 요소의 자식으로 렌더링되는 구성 요소 모음에 해당하는 구성 요소가 있습니다. 우리는 WebSQL바이트 배열로 저장된 이미지를 사용 합니다. map함수 내에서 항목에서 이미지 ID를 가져오고 DAL이미지에 대한 바이트 배열을 가져 오기 위해에 대한 비동기 호출을 수행합니다 . 내 문제는 내가 약속을 React로 전파 할 수 없다는 것입니다. 왜냐하면 그것이 렌더링에서 약속을 처리하도록 설계되지 않았기 때문입니다. 나는 C#배경에서 왔기 때문에 await분기 코드를 다시 동기화 하는 키워드 와 같은 것을 찾고 있다고 생각 합니다.

map이 같은 기능 외모 뭔가 (간체) :

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} />
       );
    });

및 getImageUrlById방법은 다음과 같습니다 :

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

이것은 작동하지 않지만이 작동을 위해 무엇을 수정해야하는지 모르겠습니다. 체인에 다른 promise를 추가하려고했지만 렌더링 함수가 합법적 인 JSX 대신 promise를 반환하기 때문에 오류가 발생합니다. React데이터를 가져 오기 위해 수명주기 방법 중 하나를 활용해야한다고 생각 했지만 props이미 거기에 있어야하므로 어디에서 할 수 있는지 알 수 없습니다.

---

render()메서드는 this.props 및 this.state에서 UI를 렌더링해야하므로 데이터로드를 비 동기화하려면 매핑 this.state을 저장 하는 데 사용할 수 있습니다 imageId:imageUrl.
그런 다음 componentDidMount()메서드에서 imageId에서 imageUrl을 채울 수 있습니다. 그런 다음 render()메서드는 this.state객체 를 렌더링하여 순수하고 단순해야 합니다.

다음은 간단한 샘플 코드
입니다. this.state.imageUrls는 비동기 적으로 채워 지므로 렌더링 된 이미지 목록 항목은 URL을 가져온 후 하나씩 나타납니다. this.state.imageUrls모든 이미지 ID 또는 색인 (URL 제외)으로를 초기화 할 수도 있습니다 . 이렇게하면 해당 이미지가로드 될 때 로더를 표시 할 수 있습니다.

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>
    );
}

---

또는 react-promise를 사용할 수 있습니다.

패키지 설치 :

npm i react-promise

그리고 코드는 다음과 같이 보일 것입니다.

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}/>} />    
    );
});

전체 문서 : 반응 약속

참고 URL : https://stackoverflow.com/questions/33242378/rendering-react-components-with-promises-inside-the-render-method