렌더링 메서드 내 약속 포함 Rendering React 구성 요소

렌더링 메서드 내 약속 포함 Rendering React 구성 요소

소품으로 아이템을 모아놓은 컴포넌트와map부모 컴포넌트의 자녀로 렌더링되는 컴포넌트의 컬렉션에 포함시킵니다.저장된 이미지를 사용합니다.WebSQL바이트 배열로 지정합니다.내부mapfunction I는 항목에서 이미지 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;
    });
}

이것은 동작하지 않습니다만, 이것을 동작시키기 위해서 무엇을 수정해야 할지 모르겠습니다.체인에 다른 약속을 추가하려고 했지만 렌더링 함수가 합법적인 JSX가 아닌 약속을 반환하기 때문에 오류가 발생합니다.내 생각엔 내가 그 중 한 가지를 활용해야 할 필요가 있을 것 같아React데이터를 가져오는 라이프 사이클 방식입니다만, 그 이유는props이미 거기 있는 것 같은데 어디서 이걸 할 수 있을지 모르겠어

render()메서드는 UI를 렌더링해야 합니다.this.props그리고.this.state데이터를 비동기적으로 로드하려면 ,this.state저장하다imageId: imageUrl맵핑

그럼 네 안에componentDidMount()메서드, 입력 가능imageUrl부터imageId그 다음에render()방법은 순수하고 단순해야 합니다.this.state물건

주의:this.state.imageUrls는 비동기적으로 입력되므로 렌더링된 이미지 목록 항목이 URL 가져오기 후 하나씩 나타납니다.또, 의 초기화를 실시할 수도 있습니다.this.state.imageUrls모든 이미지 ID 또는 인덱스(URL 없음)를 사용하여 이미지가 로드될 때 로더를 표시할 수 있습니다.

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

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

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

render() {
    return (
      <div>
        {this.state.imageUrls.map(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}/>} />    
    );
});

편집 : 2019년 10월

리액션 프로미스의 마지막 빌드는 다음과 같은 후크를 제공합니다.usePromise:

import usePromise from 'react-promise';

const ExampleWithAsync = (props) => {
  const {value, loading} = usePromise<string>(prom)
  if (loading) return null
  return <div>{value}</div>}
}

전문 문서: react-promise

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