0

En esta primera pantalla del Home mando los datos a la pantalla del Detalle: En esta pantalla quiero que se actualizen los datos que edito en la pantalla del Detalle y se refresque también en esta pantalla, por favor si alguien puede darme su ayuda la acepto con todo gusto, gracias!

       export interface Props {    
list: any;
route: { params: any };
navigation: { openDrawer: () => void; navigate: (route:string) => void };


}
  export interface State {
    Posts: Post[],
    isLoading: boolean
  }
  class Home extends React.Component<Props, State> {

constructor(props: Props) {
  super(props);
  this.state = { 
    Posts: [], 
    isLoading: true,
  };
}

async componentDidMount() {      
  const muroService = new MuroService();
  var response = await muroService.ObtenerPublicaciones();
  
  if(this.props.route.params.Post){
    const Post = this.state.Posts.findIndex(element => element.PostId == this.props.route.params.Post.PostId )
    let newPost = [...this.state.Posts];
    newPost[Post] = {...newPost[Post]};
    this.setState({
      Posts: newPost
    });
  }

  this.setState({ Posts: response.Posts, isLoading: false });
}

render() {
  if(this.state.isLoading){
    return (
      <Container style={styles.container}>
        <Header>
          <Left>
            <Button transparent>
              <Icon
                active
                name="menu"
                onPress={() => { this.props.navigation.openDrawer() }}
              />
            </Button>
          </Left>
          <Body>
            <Title>LOBBY 1.0</Title>
          </Body>
          <Right />
        </Header>
          <View style={[styles.content, styles.horizontal]}>
            <ActivityIndicator size="large" color="#0000ff"/>       
          </View>
      </Container>
    )
  } 
  else{
  return (
    <Container style={styles.container}>
      <Header>
        <Left>
          <Button transparent>
            <Icon
              active
              name="menu"
              onPress={() => { this.props.navigation.openDrawer() }}
            />
          </Button>
        </Left>
        <Body>
          <Title>LOBBY 1.0</Title>
        </Body>
        <Right />
      </Header>
      <Content>
      {
        this.state.Posts.map((post: Post, index:number) => (
          <PostComponent navigation={this.props.navigation} Post={ post } key={ post.PostId + '' } ></PostComponent>
        ))
      }
      </Content>
    </Container>
  );
  }
}

Y en esta modifico los datos y los quiero mandar hacia la pantalla de Home nuevamente pero actualizados y no me deja hacerlo, intente hacerlo con setState pero lo estoy haciendo mal, alguna sugerencia que tengan? Cualquier sugerencia la acepto con todo gusto, tal vez sea algo sencillo pero ya se me hizo algo dificil

       goBack() {
         this.props.navigation.goBack( { Post: this.state.Post })
       }

      <Icon
        name="arrow-back"
        onPress={() => { this.goBack() } }
      />

Aquí estoy intentando cambiar el estado del arreglo al que acabo de actualizar en la pantalla del Detalle

async componentDidMount() {      
  const muroService = new MuroService();
  var response = await muroService.ObtenerPublicaciones();
  
  if(this.props.route.params.PostId){
    const Post = this.state.Posts.findIndex(element => element.PostId == this.props.route.params.PostId )
    let newPost = [...this.state.Posts];
    newPost[Post] = {...newPost[Post]};
    this.setState({
      Posts: newPost
    });
  }

  this.setState({ Posts: response.Posts, isLoading: false });
}
9
  • ¿Puedes por favor compartir tu componente de Home en su totalidad? Y porqué haces this.props.route.params.PostId si a la hora de navegar a Home haces {this.props.navigation.navigate("HomeDetalle", { Post: this.props.Post } )}. ¿No debería de ser this.props.route.params.Post?
    – FranAcuna
    Commented el 7 abr. 2021 a las 21:08
  • Cierto, es que andaba haciendo pruebas pasando el Id, disculpa.
    – Xon
    Commented el 7 abr. 2021 a las 21:48
  • constructor(props: Props) { super(props); this.state = { Posts: [], isLoading: true, }; }
    – Xon
    Commented el 7 abr. 2021 a las 21:50
  • ` async componentDidMount() { const muroService = new MuroService(); var response = await muroService.ObtenerPublicaciones(); if(this.props.route.params.Post){ const Post = this.state.Posts.findIndex(element => element.PostId == this.props.route.params.Post.PostId ) let newPost = [...this.state.Posts]; newPost[Post] = {...newPost[Post]}; this.setState({ Posts: newPost }); } this.setState({ Posts: response.Posts, isLoading: false }); }`
    – Xon
    Commented el 7 abr. 2021 a las 21:51
  • Por favor no compartas segmentos de código en la sección de comentarios. Edita tu pregunta.
    – FranAcuna
    Commented el 7 abr. 2021 a las 21:53

1 respuesta 1

1

No sé, si esta es la forma correcta de hacer lo que preguntas, pero yo lo pude solucionar de esta manera, básicamente tengo una aplicación en react native con dos pantallas inicio que lista las tareas y la pantalla dos para registrar tareas, voy de la pantalla de inicio a la pantalla de registro y agrego una nueva tarea le doy guardar y vuelvo atrás y no se refresca la lista, por tanto, no aparece la que acabo de agregar, así que cierro la aplicación y vuelvo a ingresar y efectivamente aparece la nueva tarea.

Esta solución capta el evento focus, para saber en qué momento el usuario está viendo la pantalla y así solicitar que consulte si hay nuevos datos para mostrar.

const [shoppingList, setShoppingList] = useState([]);
let focusListener = null;

useEffect(() => {
    createTableShoppingLists();
    focusListener = navigation.addListener('focus', () => {
        console.log('Updating because screen entered on focus .....');
        ReadShopingList();
    });
    return function cleanUp() {
        focusListener.remove();
    };
}, []);

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.