Блог

Я получил экран реакции с компонентами, которые выполняют вызовы API. Я не могу заставить экран перезагружаться при обновлении.

Итак, проблема в том, что я хочу, чтобы рабочий стол повторно отображал все дочерние компоненты, но я не могу заставить его работать. Я пытался изменить состояние ScrollView, но ничего не происходит.

Есть предложения?

Мой код:

     class HomeScreen extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    this.props.refreshing.then(() => {
      this.setState({refreshing: false});
    });
  }

    render(){
    return (
        <View style={styles.Container}>
            <Header
            //leftComponent={<AppMenu navigation={props.navigation} />} Bortagen tills behov finns
            centerComponent={<Image source={require('../assets/logo.png')} style={styles.Image} />}
            statusBarProps={{ barStyle: "light-content" }}
            containerStyle={{
            backgroundColor: '#0B2861',
            justifyContent: 'space-around',
            borderBottomWidth:0
            }}
        />
        <ScrollView
        refreshControl={
            <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
            />
        }
        status={this.state.lastRefresh}>
        <Image source={{uri:'https://www.//.jpg'}}
        style={styles.fullImage} 
        resizeMode="cover"
        />

        <View style={styles.TopButtonWrapper}>
        <Button title="Webcam" icon={<FontAwesome5 style={{ marginRight: 6 }} name={'camera'} size={25} color="white"/>} style={styles.TopButtons}
        onPress={() => this.props.navigation.navigate('Webcam')} />

        <Button title="Väder" icon={<FontAwesome5 style={{ marginRight: 6 }} name={'snowflake'} size={25} color="white"/>} style={styles.TopButtons}
        onPress={() => this.props.navigation.navigate('Weather')} />

        <Button title="Pister" icon={<FontAwesome5 style={{ marginRight: 6 }} name={'skiing-nordic'} size={25} color="white"/>} style={styles.TopButtons}
        onPress={() => this.props.navigation.navigate('Live')}/>
        </View>



        <ListNews navigation={this.props.navigation}/>

        </ScrollView>
        </View>
    );
    }
};

export default HomeScreen;
 

Мой файл ListNews:

     class ListNews extends React.Component{
   constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }


  fetchData() {
      return fetch('MyApiURL')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson.blogs,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

    componentDidMount(){
      this.fetchData();
    }
 

РЕДАКТИРОВАТЬ: я решил свою проблему. Я не понял, что мне нужно изменить значение ключа, чтобы перемонтировать мой компонент. Изменение значения ключа refreshValue в ScrollView привело к перемонтированию компонента! 🙂

       constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      refreshValue: 1
    };
    console.log(this.state.resetState);
  }

  refreshScreen = () => {
    this.setState({refreshing: true});
    this.setState(({ refreshValue }) => ({
      refreshValue: refreshValue   1,
    }));
    console.log('Screen refreshed!');
    this.setState({refreshing: false});
  }
 

Я решил свою проблему. Я не понял, что мне нужно изменить значение ключа, чтобы перемонтировать мой компонент. Изменение значения ключа refreshValue в ScrollView привело к перемонтированию компонента! 🙂

       constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      refreshValue: 1
    };
    console.log(this.state.resetState);
  }

  refreshScreen = () => {
    this.setState({refreshing: true});
    this.setState(({ refreshValue }) => ({
      refreshValue: refreshValue   1,
    }));
    console.log('Screen refreshed!');
    this.setState({refreshing: false});
  }