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

单击更新另一个组件

1 个答案: