陣營原住民，導航從一個組件道具到另一個

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) 
 
    }) 
 
} 
 

我上面有這個功能，我想送matchInfo到matchPage。

我按照如下所述採取該道具。

'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 } 
 
}

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

你永遠不會改變的道具直接反應。您必須始終通過setState更改狀態並將狀態傳遞給組件作爲道具。這允許React爲您管理狀態，而不是手動調用。

在你的API調用的結果，將組件狀態：根據需要爲子組件

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

然後通過國家。

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

這些就在子組件被引用爲道具：

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

如果您需要引用組件本身內部的這些值，參考狀態而不是道具。

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

記住組件管理自己的狀態並根據需要將該狀態作爲道具傳遞給兒童。