如何在视图以外的任何其他函数中使用 api 响应数据

Question

我使用react-native fetch从REST API获取数据。 它在视图中显示良好。现在我需要使用按钮的响应按下功能。用于响应

.then((responseJson) => {
    this.setState({
      data: responseJson,
    })
  })

我得到的价值是

{
"id": 2,
"foo": "bar"
}

它在视图中工作正常

<Text>{this.state.data.answer}</Text>

我需要这个

_onPressButtonA() {
    alert("bar");
  }

我的按钮代码是

<TouchableOpacity onPress={this._onPressButtonA}>
  <Text>{this.state.data.option1}</Text>
</TouchableOpacity>

完整代码

class QuestionScreen extends React.Component {
state = {
data: '',
}
componentDidMount() {
return fetch('http://example.com/api', {
method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    param: 'foo',
  }),
}).then((response) => response.json())
  .then((responseJson) => {
      this.setState({
      data: responseJson,
    })
  })
  .catch((error) => {
    console.error(error);
  });
}
_onPressButtonA() {
//Needed to be displayed here
}
render() {
return (
  <View style={{ flex: 1, paddingTop: 20 }}>
    <View style={{ margin: 15 }}>
      <View style={{ margin: 5 }} />
      <TouchableOpacity onPress={this._onPressButtonA}>
        <Text>{this.state.data.answer}</Text>
      </TouchableOpacity>
  </View>
);
}
}

Answer 1

根据

我的评论，您应该使用箭头函数，以便您可以通过此访问状态

_onPressButtonA = () => {
//Needed to be displayed here
}

或者你可以在构造函数中手动绑定它

this._onPressButtonA = this._onPressButtonA.bind(this)