代码之家 › 专栏 › 技术社区 › John Doe

如何在启动应用程序时不运行函数?

react-native

John Doe · 技术社区 · 7 年前

我目前正在学习如何使用react native创建应用程序,我遇到了一个问题:为什么我的应用程序在刚开始运行时运行该方法?

我以为我只是在按下按钮时调用componentDidMount()函数?

一切都按计划进行,但我不知道为什么会这样。

谢谢你的帮助!

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default class App extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      isLoading: true,
      text: ''
    }
  }

  componentDidMount(summonerIGN){
    console.log("This is in summonerIGN", summonerIGN)
      return fetch('https://na1.api.riotgames.com/lol/summoner/v3/summoners/by-name/' + summonerIGN +'?api_key=<APIKey>')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log("This is in responseJson", responseJson)
        console.log("This is the summoner ID: ", responseJson.id)
        this.setState({
          isLoading: false,
          dataSource: responseJson,
          summonerID: responseJson.id,
          summonerName: responseJson.name,
        })
      })
      .catch((error) => {
        console.error(error)
      })
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Search For Summoner!"
          onChangeText={(text) => this.setState({
            text: text
          })}
        />
        <Button 
          onPress={() => {
            console.log("This is in this.state.text", this.state.text)
            this.componentDidMount(this.state.text)
          }}
          title="Search"
          color="#841584"
        />
        <Text style={{padding: 10, fontSize: 20}}>
          Searching for summoner: {this.state.text}
        </Text>
        <Text>
          The summpner ID: {this.state.summonerID}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1 回复 | 直到 7 年前

tajammul1996 7 年前

不能只调用componentDidMount()。一旦加载了组件,它就会自动执行。不要在componentDidMount()中编写逻辑,而是编写一个单独的函数并调用该函数。

componentDidMount()是一个生命周期方法。生命周期方法根据组件负载自动调用。

export default class App extends React.Component {

constructor(props){
super(props)
this.state = {
  isLoading: true,
  text: ''
}
}

callApi = (summonerIGN) => {
console.log("This is in summonerIGN", summonerIGN)
  return fetch('https://na1.api.riotgames.com/lol/summoner/v3/summoners/by-name/' + summonerIGN +'?api_key=<APIKey>')
  .then((response) => response.json())
  .then((responseJson) => {
    console.log("This is in responseJson", responseJson)
    console.log("This is the summoner ID: ", responseJson.id)
    this.setState({
      isLoading: false,
      dataSource: responseJson,
      summonerID: responseJson.id,
      summonerName: responseJson.name,
    })
  })
  .catch((error) => {
    console.error(error)
  })
 }

render() {
return (
  <View style={{padding: 10}}>
    <TextInput
      style={{height: 40}}
      placeholder="Search For Summoner!"
      onChangeText={(text) => this.setState({
        text: text
      })}
    />
    <Button 
      onPress={() => {
        console.log("This is in this.state.text", this.state.text)
        this.callApi(this.state.text)
      }}
      title="Search"
      color="#841584"
    />
    <Text style={{padding: 10, fontSize: 20}}>
      Searching for summoner: {this.state.text}
    </Text>
    <Text>
      The summpner ID: {this.state.summonerID}
    </Text>
  </View>
);
}
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'center',
},
});