React dropzone 이미지가 템플릿에 업데이트되지 않았습니다

Question

여러 이미지 업로드를 위해 반응 dropzone 구성 요소를 사용했지만 템플릿에 이미지 미리보기가 표시되지 않았습니다. 파일이 console.Where에 표시됩니다. 내가 잘못 했습니까? 여기에서이 구성 요소를 사용했습니다 https://github.com/okonet/react-dropzone. 미세한 빗으로이 문제를 조사하기 위해 내가 무엇을 제공해야하는지 알려주세요. 도움에 미리 감사드립니다. 귀하의 도움을 주시면 감사하겠습니다.

import React from 'react'; 
import Dropzone from 'react-dropzone'; 

export default class DropzoneDemo extends Dropzone { 
    constructor(props) { 
    super(props); 
    this.state = { 
     files: [], 
     style: {}, 
    }; 
    } 

    componentDidMount() { 
    this.state.style = { 
     backgroundImage: (`url(${this.props.img})`), 
    }; 
    this.state.files = []; 
    } 

    componentDidUpdate() { 
    if (this.state.files.length) { 
     this.state.style = { 
     backgroundImage: (`url(${this.state.files[0].preview})`), 
     }; 
    } else { 
     this.state.style = { 
     backgroundImage: (`url(${this.props.img})`), 
     }; 
    } 
    } 

    onDrop(files) { 
    console.log(this.state.files); 
    this.state.files = files; 
    } 

    render() { 
    const emptyStyle = { 
     backgroundImage: 'none', 
    }; 
    return (
     <div> 
     <Dropzone onDrop={this.onDrop} style={emptyStyle} > 
      <div className='wrap-to-drag-img' style={this.state.style}></div> 
     </Dropzone> 
     </div> 
    ); 
    } 
} 

Answer 1

는 직접처럼 this.state는 스타일에서 렌더링 설정

this.state.style = { // this is bad 
     backgroundImage: (`url(${this.state.files[0].preview})`), 
     }; 

() 대신

render() { 
    const bgImage = this.state.files.length ?    
     `url(${this.state.files[0].preview})` : 
     `url(${this.props.img})`; 
    const bgStyle = { 
    backgroundImage: bgImage 
    }; 

    const emptyStyle = { 
    backgroundImage: 'none', 
    }; 
    return (
    <div> 
     <Dropzone onDrop={this.onDrop} style={emptyStyle} > 
     <div className='wrap-to-drag-img' style={bgStyle}></div> 
     </Dropzone> 
    </div> 
); 
} 

Answer 2

onDrop(files) { 
    this.state.files = files; 
    console.log(files[0].preview); 
    const bgImage = this.state.files.length ? 
     `url(${this.state.files[0].preview})` : 
     `url(${this.props.img})`; 
    const bgStyle = { 
     backgroundImage: bgImage, 
    }; 
    const emptyStyle = { 
     backgroundImage: 'none', 
    }; 
    const dropzone = document.getElementById('dropzone'); 
    ReactDOM.render(<div id='dropzone'><Dropzone onDrop={this.onDrop} style={emptyStyle} > 
     <div className='wrap-to-drag-img' style={bgStyle}></div> 
    </Dropzone></div>, dropzone); 
    }