1

tengo este problema al querer recargar el arreglo desde otra pantalla,

Pantalla del detalle donde al agregar un comentario se actualiza esta pantalla, pero solamente se actualiza ésta. En cambio a la pantalla de Home no se actualiza.

HomeDetalle:

state = {
  Post: {
    PostId: 0,
    PostComment: '',
    PostedBy: '',
    ImageId: 0,
    PostedOn: new Date(),
    UserId: 0,
    Comments: [] as PostComment[],
    LikesCount: 0,        
  },
  textoComentario: '',
  onPostRefresh: (post: Post) => {},
};

constructor(props: Props) {      
  super(props);      
  this.state = { 
    Post: props.route.params.Post,
    textoComentario: '',
    onPostRefresh: props.route.params.onPostRefresh,
  };
}

formatDate(input: Date): string {
  return moment(input).locale('es').startOf('hour').fromNow()
}


async PublicarComentario() {
  const muroService = new MuroService();
  const postId = this.state.Post.PostId;
  const model: PublicarComentario = {
    PostId: postId,
    Comment: this.state.textoComentario
  }
  const response = await muroService.PublicarComentario(model);

  if(!response.OperationSuccesful) {
    Alert.alert(response.ErrorMessage);
  } else {
    Alert.alert("Haz publicado un comentario");
  }
  this.setState({
    Post: response.Post,
    textoComentario: '',
  });

}

goBack() {      
  this.props.navigation.goBack();
  this.state.onPostRefresh(this.state.Post);
}

Aquí tengo mi funcion para actualizar mi componente llamado Posts en la pantalla Home:

actualizarPost(post: Post) {
  const Post = this.state.Posts.findIndex(e => e.PostId === post.PostId);
  let postCopy = [...this.state.Posts];
  postCopy[Post] = {...this.state.Posts[Post]}
  this.setState({
    Posts: postCopy.concat(post)
  })
}

Ya revisé debuggeando que funciona todo bien, el post en el actualizarPost() funciona de manera correcta, se trae el post actualizado pero al momento de querer hacer un setState no me funciona, alguien tiene alguna idea de que puedo hacer?

Comparto el .map en pantalla Home:

     {
        this.state.Posts.map((post: Post, index:number) => (
          <PostComponent navigation={this.props.navigation} Post={ post } onPostSelected={ this.onPostSelected } key={ post.PostId + '' } ></PostComponent>
        ))
      }

En mi componente PostComponent tengo esto funcionando de manera correcta:

<TouchableOpacity onPress={() => { this.props.onPostSelected(this.props.Post); }

Tambien tengo esto en mi pantalla Home para mandar en la navegacion un onPostRefresh con la funcion this.actualizarPost para que regrese con el Post actualizado:

onPostSelected(post: Post) {                 
  this.props.navigation.navigate("HomeDetalle", { Post: post, onPostRefresh: this.actualizarPost  } );      
}
5
  • Actualicé la respuesta en relación al problema de Two Children, también deje otros comentarios, saludos.
    – g.4
    el 15 abr. 2021 a las 3:39
  • Sugiero que se elabore más la pregunta, hay que agregar todos los componentes en cuestión, no queda claro lo que se quiere lograr.
    – g.4
    el 15 abr. 2021 a las 22:16
  • Listo, todo relacionado a eso, gracias por la ayuda, soy un poco nuevo! Saludos
    – Xon
    el 16 abr. 2021 a las 0:09
  • ya se ve mas detallado, dime ¿Cómo estas trayendo this.state.Posts en el componente Home? Supongo que estas usando ComponentDidMount -> newMuroService.
    – g.4
    el 16 abr. 2021 a las 15:28
  • Si nos puedes compartir también el componente Home, no queda claro cómo se pasa de home a HomeDetalle, ni cómo se dispara PublicarComentario en HomeDetalle, saludos.
    – g.4
    el 17 abr. 2021 a las 1:27

2 respuestas 2

0

Cuando usas una función dentro de this.setState(...) este debe retornar el nuevo valor que quieres se setee en tu state, pero en tu ejemplo no retorna nada.

Esto debería funcionar

actualizarPost(post: Post) {
  this.setState(prevState => {
    return {
      ...prevState, // se mantienen las otras llaves
      Posts: prevState.Posts.concat(post) // se sobreescribe el campo Posts
    }
  })
}

Espero te sirva!

1
  • me sale el mismo error de Encountered two children with the same key crees que se deba a otra cosa?
    – Xon
    el 15 abr. 2021 a las 0:24
0

Resolví el problema haciendo esto:

actualizarPost(post: Post) {
  this.actualizarListado();
}

Y poniendo esto en componentDidMount()

async componentDidMount() {
  this.actualizarListado();
}

async actualizarListado() {
  // code
}

Tu Respuesta

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

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