Реагировать на нативную опцию refre sh для получения данных - PullRequest
Новая
       23

Реагировать на нативную опцию refre sh для получения данных

0 голосов
/ 16 апреля 2020

Я использую React native для отображения данных из API выборки. Но когда данные обновляются, все равно отображаются старые данные. Я не понимаю, как выполнить опровержение refre sh внутри моего кода. 

class YourActivitiesScreen extends Component{
    constructor(props) {
        super(props);
        this.state = {
            activitiesList: [],   
        }
    };
    componentDidMount(){
        AsyncStorage.getItem('id_token').then(this.getData)
    }
    getData=(token)=>{
        console.log(token)
       fetch('http://192.168.0.1:8887/api/auth/activities/your',{
            method: 'POST',
            headers:{
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' +token,
            },
        })
        .then((response) => response.json())

        .then((res) => {
            if(res.yourActivity)
            {
                let yourActivity = res.yourActivity
                this.setState({activitiesList: yourActivity})
            }
        })
        .catch((e) => console.log('Error: ', e))
        }
        renderItem = (item) => {
            return (
              <TouchableOpacity
                onPress={() => 
                  this.props.navigation.navigate('Details',{activity: item})
                }
              >
                <View style={styles.item}>
                  <Text style={styles.itemtext}>{item.name} </Text>
                </View>
              </TouchableOpacity>
            );
          }
    render(){
        const listActivities = this.state.activitiesList

        return (
                <View stlye={styles.container}>
                    <SafeAreaView>
                        <FlatList
                            data = {listActivities}
                            renderItem={({ item }) => this.renderItem(item)}
                            keyExtractor={item => item.id}
                            style={styles.list}
                        />
                    </SafeAreaView>
                </View>
        )
        }
}

Нужно ли мне что-то сделать, чтобы компонент componentDidMount снова запустился, пока я выполняю выпадающее действие? Если да, может кто-нибудь объяснить мне, как это сделать?

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Вы должны использовать опору extraData FlatList при каждом обновлении данных.

extraData

Свойство маркера для повторного рендеринга списка (поскольку оно реализует PureComponent). Если какой-либо из ваших renderItem, Header, Footer, et c. функции зависят от чего-либо за пределами data реквизита, прикрепите его сюда и обработайте неизменно.

Установите extraData реквизит с помощью объекта activitiesList: 

render(){
  const listActivities = this.state.activitiesList

  return (
    <View stlye={styles.container}>
      <SafeAreaView>
        <FlatList
          data={listActivities}
          extraData={listActivities}
          renderItem={({ item }) => this.renderItem(item)}
          keyExtractor={item => item.id}
          style={styles.list}
        />
      </SafeAreaView>
    </View>
  )
}
0 голосов
/ 16 апреля 2020

Пожалуйста, попробуйте использовать onRefresh prop в FlatList. Ссылка: https://reactnative.dev/docs/flatlist#onrefresh Примечание: Пожалуйста, убедитесь, что правильно установите refreshing опору при использовании onRefresh в FlatList.

Реализация тяги, чтобы обновить sh FlatList

...