react-native helloWorldApp에서 반환 가져 오기 결과를 렌더링하는 방법은 무엇입니까?

Question

나는 Android 개발자이지만 JavaScript 나 초보자 용을 처음 사용합니다. 나는 페이스 북의 반응식 인 tutorial을 따르고 있었고이 샘플 코드를 내 index.android.js에 복사하여 붙여 넣을 수 있었고 'R-R'키를 클릭하면이 네트워크 섹션까지 시뮬레이터에서 결과 UI를 볼 수있었습니다. 코드 샘플은 fetch가 render()로 연결되는 방법을 보여주지 않으므로 발췌 일 뿐이며 더 이상 컴파일 할 수 없습니다. render() {코드 아래에 반환하려고했지만 오류가 발생했습니다.

myFetch.render() : 유효한 React 요소 (또는 null)를 반환해야합니다. undefined, 배열 또는 다른 잘못된 객체를 반환했을 수 있습니다.

class myFetch extends Component{ 


render(){ 
    return (

    fetch('https://facebook.github.io/react-native/movies.json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
     return responseJson.movies; 
    }) 
    .catch((error) => { 
     console.error(error); 
    }) 

    ); 
}; 
} 

AppRegistry.registerComponent('HelloWorldApp',() => myFetch); 

어떻게 가장 간단한 방법으로 해결하고, 읽을 수있는 포인터, 무슨하시기 바랍니다인가?

Answer 1

렌더() 메소드는 React element (or null)<View></View>처럼을 반환해야합니다.

그리고 네트워크 요청은 componentDidMount() 또는 기타 Lifecycle method에 구현되어야합니다.

Answer 2

class myFetch extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = {movies: 'init'}; 
    } 

componentDidMount() { 
    fetch('https://facebook.github.io/react-native/movies.json') 
     .then((response) => response.json()) 
     .then((responseJson) => {this.setState({movies: responseJson.title});}) 
     .catch((error) => { 
      console.error(error); 
     }) 
} 

render(){ 
    return (
     <Text>{this.state.movies}</Text> 
    ); 
} 

}

AppRegistry.registerComponent('HelloWorldApp',() => myFetch);