點擊更新另一個組件

Question

我試圖在單擊按鈕時在頁面上顯示一個新字符串。現在我有一個服務被調用，當我點擊一個按鈕時返回一個字符串。這有效，我可以提醒和記錄價值，我得到了我想要的。然而，當我按一下按鈕，我要顯示在頁面上該值

這是我到目前爲止有：

class Status extends Component { 
    render() { 
    return (
     <Text>{this.props.status}</Text> 
    ); 
    } 
} 

class StupidStatusApp extends Component { 

    _onPressButton() { 
     return fetch('http://stupidstat.us/api/user/status') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     console.log(responseJson.text); 
     return responseJson.text; 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Status status={this._onPressButton} style={styles.welcome}> 
     </Status> 
     <TouchableHighlight style={styles.button} onPress={this._onPressButton}> 
      <Text style={styles.buttonText}>Get new stupid status</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

我不知道如何將價值傳遞到和重新渲染每按一下按鈕。

Answer 1

您應該將狀態存儲在狀態中，並使用setState進行更新，而不是返回狀態並嘗試將其分配給屬性。然後您可以將狀態傳遞給您的Status組件：

class Status extends Component { 
    render() { 
    return (
     <Text>{this.props.status}</Text> 
    ); 
    } 
} 

class StupidStatusApp extends Component { 

    _onPressButton() { 
     return fetch('http://stupidstat.us/api/user/status') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     console.log(responseJson.text); 
     this.setState({status:responseJson.text}); // Change here 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <Status status={this.state.status //Change here} style={styles.welcome}> 
     </Status> 
     <TouchableHighlight style={styles.button} onPress={() => {this._onPressButton}}> // Change here 
      <Text style={styles.buttonText}>Get new stupid status</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
}