Блог

Я новичок в семействе javascript и пишу небольшую программу на react native. Я пытаюсь с помощью SampleFunction2 вернуть census и отобразить его в Flatlist при нажатии кнопки onpress. Разве я не должен возвращать значение для нажатия кнопки onpress (событие)? Каков правильный подход? Спасибо

     import React, { Component } from 'react';
    import { StyleSheet, FlatList,TouchableOpacity,Text, ListView,View, 
    Button, Alert } from 'react-native';
    export default class App extends Component<{}> {   

    SampleFunction2(){
     var census = [
                {name: 'Devin', id :0},
                {name:  'Jackson', id:1},
                {name:  'James', id:2},]


     return census;
   }

   render() {
    return (
      <View style={styles.container}>
      <Button onPress={this.SampleFunction2.bind(this)} title="Click here 
      to call function - One"
        //Here I was thinking I could overlay the return value into Flatlist
       />

      //<FlatList
      //<Button onPress={this.SampleFunction1.bind(this)} title= "Click 
        // here to call Function - One"/>
        //data = {this.SampleFunction2()}
       // renderItem = {({item}) =>
      //<Text>{item.id}</Text>,
       // <Text>{item.name}</Text>
     // }

     // />


      </View>
    );
  }
  

На самом деле вы не возвращаете значение из onPress, но вы можете перевести данные в состояние компонента и показать их, если они доступны. Должно сработать следующее.

 export default class App extends Component {   
  constructor() {
    this.state = {}
  }
  SampleFunction2(){
     this.setState({census: [
            {name: 'Devin', id :0},
            {name:  'Jackson', id:1},
            {name:  'James', id:2}]})
 }
 render() {
   const census = this.state.census;
   return (
     <View style={styles.container}>
       <Button onPress={this.SampleFunction2.bind(this)} title="Click here to call function - One" />

     {!census ? "" : (<FlatList data={census} renderItem={({item}) => <Text>{item.name}</Text>} />)}
     </View>
   );
 }