React Native：在按鈕上每10次點擊一次獲取數據

Question

前幾天我剛開始使用React Native，發現自己有點卡住了。我想通過點擊一個按鈕來逐個顯示api的值。但是，我怎樣才能做到這一點，而不是每次都獲取數據，而是每10次點擊左右呢？我現在所擁有的代碼並不按我想要的方式工作，而且我明白爲什麼 - countData（）函數總是被重新調用，因此變量i總是被卡在零處，並且永遠不會前進。理想情況下，我想循環訪問第一組值，在點擊按鈕後逐個顯示它們，然後在耗盡值之後獲取新數據（來自同一個API）。

export default class ComponentOne extends Component { 

constructor(props) { 
super(props); 
this.state = { 
    questions: '', 
    questions2: '', 
} 
} 


fetchData() { 
    if (this.state.questions == '') { 
    fetch('my url') 
    .then((response) => response.json()) 
    .then((responseData) => { 
     this.setState({ 
      questions: responseData, 
     }); 
    this.countData(); 
    }) 
    .done(); 
    } 
    else this.countData(); 
} 

countData() { 
    for (let i=0; i < this.state.questions.length; i++) { 
    this.setState({ 
    questions2: this.state.questions[i], 
    }); 
} 
} 

render() { 
return (
    <View style={styles.container}> 

    <View style={styles.textStyle}> 

    <Text style={styles.instructions}> 
     Welcome! Click the button to generate a question. 
    </Text> 

    <TouchableHighlight 
    onPress={() => this.fetchData()} 
    style={styles.bigButton} 
    underlayColor="lightskyblue"> 

     <Text style={styles.bigButtonText}>Hit me</Text> 

    </TouchableHighlight> 

    <Text style={styles.question}>{this.state.questions2}</Text> 
    </View> 
    </View> 
); 
} 
} 

我希望問題是清楚的，在此先感謝！

Answer 1

首先要做的事情是：你應該考慮不要給你這樣的apis url。

我沒有測試代碼的應用程序，但它應該工作

export default class ComponentOne extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    questions: [], 
    question: "", 
    count: 0, 
    } 
} 

componentWillMount() { 
    this.fetchData(); 
} 

fetchData() { 
    fetch('YOUR_URL') 
    .then((response) => response.JSON()) 
    .then((responseJSON) => { 
    this.setState({questions: responseJSON, count: 0}) 
    }) 
} 

newQuestion() { 
    if (this.state.questions[count] != null) { 
    this.setState({ 
     question: this.state.questions[this.state.count], 
     count: this.state.count + 1, 
    }) 
    } 
    else { //make the fetch call once all of your questions has been displayed 
    this.fetchData(); 
    } 
} 

render() { 
return (
    <View style={styles.container}> 
    <TouchableHighlight onPress={() => this.newQuestion()}> 
     <Text>Hit me</Text> 
    </TouchableHighlight> 

    <Text>{this.state.question}</Text> 
    </View> 
    </View> 
); 
} 
}