React API에서 종속

Question

이 주제에 대해 많이 검색하고 있지만 명확한 답변을 찾을 수 없습니다. 첫 반응 앱을 만들려고합니다. 나는 기본을 이해하기 위해 반응 형 앱을 만든 다음 내 앱을 서버 측 렌더링으로 옮겼다. 내가 개발할 때 나는 질문을 받았다. 앱이 대답 (서버 측)을 제공하기 전에 API에서 데이터를 가져와 실제로 필요한 일부 데이터를 가져올 수있는 방법은 무엇입니까?

Answer 1

ajax 요청을 사용하여 API에서 데이터를 가져 와서 반응 변수 state으로 설정할 수 있습니다. 렌더링하는 동안 상태 변수가 사용됩니다. 이것을위한 메소드를 정의 할 수 있고, 그 메소드를 componentDidMount()에서 호출하여 값을 상태 변수로 설정할 수 있습니다. 상기 코드 샘플

var CommentBox = React.createClass({ 
    getInitialState: function() { 
     return {data : []}; 
    }, 
    loadCommentsFromServer: function() { 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    handleCommentSubmit: function(comment){ 
     var comments = this.state.data; 
    var newComments = comments.concat([comment]); 
    this.setState({data: newComments}); 
     $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     type: 'POST', 
     data: comment, 
     success: function(data) { 
       console.log(data); 
     this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    componentDidMount: function() { 
     this.loadCommentsFromServer(); 
     setInterval(this.loadCommentsFromServer(), this.props.pollInterval); 
    }, 
    render: function() { 
    return (
     <div className='commentBox'> 
     <h1>Comments</h1> 
       <CommentList data={this.state.data} /> 
       <CommentForm onCommentSubmit={this.handleCommentSubmit} /> 
     </div> 
    ); 
    } 
}); 

가 나는 방법은 API에서 데이터를 끌어 구체적 loadCommentsFromServer() 썼다. 그리고 저는 이것을 componentDidMount()에서 호출하고 API의 출력을 상태 변수에 저장했습니다. 그리고 렌더링하는 동안 상태 변수를 사용했습니다.

참고 : 위 코드 샘플은 독자적으로 동작하지 않을 수 있습니다. 이후로는 종속성이 해결되지 않습니다.