1

Eu tenho uma lista que é carrega após o retorno da api, essa lista popula um FlatList. Ao clicar em algum item eu gostaria de marca-lo com o status que foi visualizado: usuarioViu

Como posso fazer a alteração somente do item clicado.

[
  {
    "id": 3,
    "codigoCondominio": "1212",
    "dataVencimento": "2018-03-10T00:00:00",
    "descricao": "Pagamento de taxa de licenciamento",
    "valor": 23900.9,
    "flagBloqueio": false,
    "dataBloqueio": null,
    "idUsuarioConcordou": null,
    "createTime": "2018-03-23T01:35:29.957",
    "arquivado": false,
    "dataPagamento": null,
    "numeroLancamento": 0,
    "codigo": "1212",
    "nome": "Edificio 0001",
    "usuarioViu": null,
    "flagVisualizado": null,
    "vencido": true
  },
  {
    "id": 4,
    "codigoCondominio": "1212",
    "dataVencimento": "2018-03-10T00:00:00",
    "descricao": "Pacto administradora",
    "valor": 45000,
    "flagBloqueio": true,
    "dataBloqueio": null,
    "idUsuarioConcordou": null,
    "createTime": "2018-03-23T01:36:06.52",
    "arquivado": false,
    "dataPagamento": null,
    "numeroLancamento": 0,
    "codigo": "1212",
    "nome": "Edificio 0002",
    "usuarioViu": null,
    "flagVisualizado": null,
    "vencido": true
  }
]

Simplificando eu gostaria de alterar o primeiro objeto [0].usuarioViu = true

Estou trabalhando com React-native, Redux-saga

1 Resposta 1

2

Você tem que utilizar TouchableHighlight para que os items respondam adequadamente aos toques.

  1. Defina um método para atualizar o valor da propriedade.

    handleUsuarioViu = (index) => {
      let dados = this.state.dados;
      alert(dados[index].usuarioViu); // Apenas para demonstrar
      dados[index].usuarioViu = true;
      this.setState({ dados: dados });
    };
    

    O alerta é apenas para demonstrar o funcionamento, a cada toque/clique, irá exibir o valor atual. Depois é atualizado o valor da propriedade usuarioViu do item que recebeu o toque/clique.

  2. Na propriedade renderItem de FlatList altere para:

    <TouchableHighlight onPress={() => this.handleUsuarioViu(index)}>
      <Text>{item.nome}</Text>
    </TouchableHighlight>
    

Você pode ver funcionando em snack.expo.io

1
  • Valeu mesmo, resolveu meu problema.
    – leedream
    Commented 25/03/2018 às 15:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .