reactjs - 导航到屏幕或组件时刷新屏幕或组件

Question

我有两个屏幕，一个用于显示使用 API 的记录，另一个用于注册。

问题是，当我进行注册并导航到显示屏幕时，它不会更新。

这是屏幕的构造：

  constructor(props) {
    super(props);
    this.state = {isLoading: true, pendIsLoading: true, dataSource: [], contentStorageS:""}
  };

  fetchDados = async () => {
    let usuario = await AsyncStorage.getItem("ASCOFAR_app_usuario");

    try {
      const response = await api.get("api/listaRegistros.php?usuario="+usuario);
      const responseData = await response.data
      if(responseData.status == "ERRO"){
        this.setState({
          isLoading: false,
          dataSource: "",
        })
      }else{
        this.setState({
          isLoading: false,
          dataSource: responseData,
        })
      }
      console.log(response)

    } catch (error) {
      Alert.alert(error)
    }
  }

async componentDidMount () {
    this.fetchDados();
    this.atualizaState();
  }

    tirarLoad() {
      if(this.state.isLoading == true){
        return (
            <ActivityIndicator size="large" color="#be152c"/>
        )
      }else if(this.state.dataSource == ""){
        return (
          <ScrollView >
            <View style={{justifyContent:"center", alignItems:"center",}}>
              <Image
                style ={{width:150, height:150, marginTop:35}}
                source={require('../assets/images/aguardando.png')}
              />
            </View>

          </ScrollView>
        )
      }else{
        return (
          <ScrollView>
            <Text style={styles.tituloGrid}>Formularios Enviados</Text>
            {this.state.dataSource.map(dados => (
              <View style={styles.list} key={dados.id}>
                <Text style={styles.listChild}>{dados.id}</Text>
                <Text style={styles.listChild}>{dados.nome}</Text>
                <Text>|</Text>
                <Text style={styles.listChild}>{dados.endereco}</Text>
              </View>
            ))}
          </ScrollView>
        )
      }
    }

<View style={styles.grid}>
   {this.tirarLoad()}
</View>

导航到此屏幕以更新 API 消耗时，我需要知道该怎么做

标签： reactjsreact-native

Answer 1

尝试在导航后重新渲染主屏幕

this.props.navigation.navigate('Home', {
      onBack: () => this.refresh() //function to refresh screen,
    });