>

Dropbox API를 사용하여 이미지로 채우려는 반응 구성 요소가 있습니다. api 부분은 정상적으로 작동하지만 데이터가 전달되기 전에 구성 요소가 렌더링되므로 배열이 비어 있습니다. 필요한 데이터를 가질 때까지 구성 요소의 렌더링을 어떻게 지연시킬 수 있습니까?

var fileList = [];
var images = [];
var imageSource = [];
class Foo extends React.Component {
 render(){
  dbx.filesListFolder({path: ''})
  .then(function(response) {
   fileList=response.entries;
   for(var i=0; i<fileList.length; i++){
    imageSource.push(fileList[0].path_lower);
   }
   console.log(imageSource);
   })
  for(var a=0; a<imageSource.length; a++){
   images.push(<img key={a} className='images'/>);
  }
  return (
   <div className="folioWrapper">
    {images}
   </div>
  );
 }
}

도움을 주셔서 감사합니다!


  • 답변 # 1

    변경 사항 :

    1.렌더 메소드 내에서 API 호출을 수행하지 말고 componentDidMount 를 사용하십시오.  이를위한 수명주기 방법.

    componentDidMount:

    와이즈 비즈

    2.

    componentDidMount() is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.

    정의  초기 값이 imageSource 인 상태 배열의 변수 setState를 사용하여 응답 업데이트를 받으면 업데이트 된 데이터로 구성 요소를 자동으로 다시 렌더링합니다.

    3.상태 배열을 사용하여 렌더링 방법으로 UI 구성 요소를 생성합니다.

    4.데이터를 얻을 수 없을 때까지 렌더링을 유지하려면 조건을 [] 안에 넣습니다.  방법은 render 의 길이를 확인  길이가 0이면 배열은 imageSource 입니다 .

    다음과 같이 작성하십시오 :

    return null
    
    

  • 답변 # 2

    데이터가 업데이트 될 때 다시 렌더링되도록 구성 요소의 상태 또는 소품을 사용해야합니다. Dropbox에 대한 호출은 class Foo extends React.Component { constructor(){ super(); this.state = { imageSource: [] } } componentDidMount(){ dbx.filesListFolder({path: ''}) .then((response) => { let fileList = response.entries; this.setState({ imageSource: fileList }); }) } render(){ if(!this.state.imageSource.length) return null; let images = this.state.imageSource.map((el, i) => ( <img key={i} className='images' src={el.path_lower} /> )) return ( <div className="folioWrapper"> {images} </div> ); } } 외부에서 수행해야합니다.  메소드를 사용하지 않으면 구성 요소를 다시 렌더링 할 때마다 API를 사용하게됩니다. 수행 할 수있는 작업의 예는 다음과 같습니다.

    render
    
    

    아직 이미지가 없으면 빈 class Foo extends React.Component { constructor(props) { super(props); this.state = { imageSource: [] } } componentDidMount() { dbx.filesListFolder({ path: '' }).then(function(response) { const fileList = response.entries; this.setState({ imageSource: fileList.map(file => file.path_lower); }) }); } render() { return ( <div className="folioWrapper"> {this.state.imageSource.map((image, i) => <img key={i} className="images" src={image} />)} </div> ); } } 를 렌더링합니다.  이 방법으로.

  • 답변 # 3

    먼저, 전역 적으로 정의 된 변수를 사용하지 말고 컴포넌트의 상태를 사용해야합니다.

    빈 이미지 배열로 구성 요소를 표시하지 않으려면 구성 요소에 조건부 "로드"클래스를 적용하고 배열이 더 이상 비어 있지 않으면 제거해야합니다.

    div

관련 자료

  • 이전 c - 메모리를 할당하는 한 가지 방법이 작동하는 다른 방법에 비해 왜 실패합니까?
  • 다음 c - cmake로 컴파일하는 동안 오류가 발생했습니다 - -ldwmapi를 찾을 수 없습니다