Обновление другого компонента при нажатии

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