Question

我看到了一个反应屏幕，其中包含进行API调用的组件。我无法刷新时重新加载屏幕。

所以问题是我希望HomeScreen重新渲染所有子组件，但无法正常工作。我试图更改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();
    }

编辑：我解决了我的问题。我没有得到需要更改键值来重新安装组件的信息。在ScrollView中更改键值refreshValue使组件重新安装！：）

      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});
  }

Answer 1

我解决了我的问题。我没有得到需要更改键值来重新安装组件的信息。在ScrollView中更改键值refreshValue使组件重新安装！：）

      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});
  }

Refreshcontrol重新加载所有子组件

1 个答案: