单击按钮后如何从api获取数据

Question

我尝试在 react native 中从 api 获取数据。我使用获取。 我的构造函数：

constructor(props) {
 super(props);

 this.state = {
   firstName: "",
   lastName:"",
   loading: true,
   dataSource:[],
  };
}

通过 fetch 获取数据但不起作用：

componentDidMount(){
fetch("http://myurl.com/api/person?name="+this.state.firstName+"&last_name="+this.state.lastName)
.then(response => response.json())
.then((responseJson)=> {
  this.setState({
   loading: false,
   dataSource: responseJson.data
  })
})
.catch(error=>console.log(error))
}

我还有 2 个用于名字/姓氏的文本输入和一个按钮，我想在单击按钮后从 api 获取数据，现在我使用 setState

  <Item stackedLabel>
    <Label>First Name</Label>
    <Input name="firstName" onChangeText={(firstName)=>{this.setState({firstName: firstName});}} />
  </Item>
  <Item stackedLabel Last>
    <Label>Last Name</Label>
    <Input name="lastName" onChangeText={(lastName)=>{this.setState({lastName: lastName});}} />
  </Item>
  <Button style={styles.SearchButton} full><Text> Search Person </Text> 

Answer 1

按下搜索按钮时，调用将从 api 获取数据的方法并从 componentDidMount 中删除 api 调用代码。

_onPressButton() {
    fetch("http://myurl.com/api/person?name="+this.state.firstName+"&last_name="+this.state.lastName)
    .then(response => response.json())
    .then((responseJson)=> {
      this.setState({
       loading: false,
       dataSource: responseJson.data
      })
    })
    .catch(error=>console.log(error))
  }

<Button style={styles.SearchButton} onPress={() => this._onPressButton() } full><Text> Search Person </Text>