내가 matchPage에 matchInfo을 보낼 것인지, 또 다른

Question

handleShowMatchFacts = id => { 
 
    // console.log('match', id) 
 
    return fetch(`http://api.football-api.com/2.0/matches/${id}?Authorization=565ec012251f932ea4000001fa542ae9d994470e73fdb314a8a56d76`) 
 
    .then(res => { 
 
    // console.log('match facts', matchFacts) 
 
     this.props.navigator.push({ 
 
     title: 'Match', 
 
     component: MatchPage, 
 
     passProps: {matchInfo: res} 
 

 
    }) 
 
     // console.log(res) 
 
    }) 
 
} 
 

나는 위의이 기능이 하나 개의 구성 요소에서 소품을 탐색, 기본 반응한다.

다음과 같이 해당 소품을 사용합니다.

All the info I need is in that object - 'this.props.matchInfo._bodyInit'. My problem is that after '._bodyInt', I'm not sure what to put after that. I've tried .id, .venue, and .events, they all console logged as undefined...

Answer 1

응답으로 json 객체를 수신한다고 가정하면 값을 가져 오기 전에 응답을 구문 분석해야합니다.

var resp = JSON.parse(matchInfo); 
body = resp['_bodyInit']; 

Answer 2

직접 반작용에 소품을 변경하지 않을

'use strict' 
 

 
import React from 'react' 
 
import { StyleSheet, View, Component, Text, TabBarIOS } from 'react-native' 
 
import Welcome from './welcome.js' 
 
import More from './more.js' 
 

 
export default class MatchPage extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 
    componentWillMount(){ 
 

 
    console.log('mathc facts ' + this.props.matchInfo._bodyInit) 
 
    } 
 

 

 

 
\t render(){ 
 
\t \t return (
 
\t \t \t <View> 
 

 
     </View> 
 

 
\t \t) 
 
\t } 
 
}

. 항상 setstate을 통해 상태를 변경하고 상태를 구성 요소로 전달해야합니다. 이것은 React가 물건을 수동으로 호출하는 것이 아니라 당신을 위해 상태를 관리 할 수있게합니다. 하위 구성 요소로 필요에 따라

this.setState({ 
    title: 'Match', 
    component: MatchPage, 
    matchInfo: res 
} 

가 그런 상태를 전달합니다 귀하의 API 호출의 결과에

는 구성 요소 상태을 설정합니다.

class FooComponent extends Component { 
    constructor(props) { 
     super(props); 
    } 
    componentWillMount() { 
     console.log(this.props.title); 
     console.log(this.props.matchInfo); 
     // Etc. 
    } 
} 

당신이 구성 요소 자체 내부에이 값을 참조해야하는 경우

이 소품보다는 상태 참조 :

render() { 
     return(
      <FooComponent title={this.state.title} matchInfo={this.state.matchInfo} /> 
     ); 
    } 

이

는 소품으로 자식 요소에서 참조 할 수 있습니다.

this.state.title; 
this.state.matchInfo; 

구성 요소가 자신의 상태를 관리하고 필요에 따라 해당 상태를 하위 노드로 전달한다는 사실을 기억하십시오.