2
respostas

erro curtida

ao clicar no botão de curtir, ele esta curtindo todos ao invés de curtir apenas o do botão clicado

import React, { Component,  useState, useEffect} from 'react';

import { 
  View, 
  Text, 
  Image, 
  ScrollView, 
  Dimensions,
  StyleSheet,
  FlatList,
  Platform,
  TouchableOpacity
 } from 'react-native';

 import Cabecalho from './Cabecalho'
 import lerFotos from '../api/Feed'

export default function components() {

  const [fotos, setFotos] = useState([])
  const [likeado, setLikeado] = useState(false)
  const [like, setLikes] = useState(likeado)

  useEffect(() =>{

    lerFotos(setFotos)
  },[])

const getLike = (likeado) => {
  if(likeado > 0 ){
    return require("../assets/s2-checked.png")
  }
  return require("../assets/s2.png")
}

  const curtitFoto = () => {
    // console.warn(fotos)
    let qnt = like
    if (likeado) {
      qnt--
    } else {
      qnt++
    }
    setLikes(qnt)
    setLikeado(!likeado)
  }


  return (
    <View style={styles.container}>
      <FlatList 
        data={fotos}
        keyExtractor={item => String(item.id)}
        renderItem={fotos=>
          <>
            <Cabecalho 
            nomeUsuario={fotos.item.userName}
            urlImagem={fotos.item.userURL}
            />
          <Image source={{uri: fotos.item.url}} style={styles.img} />
          <Text style={styles.description}>{fotos.item.description}</Text>
          <View style={styles.containerLike}>
          <TouchableOpacity onPress={curtitFoto}>
            <Image source={getLike(likeado)} style={styles.like} />
          </TouchableOpacity>
          <Text>curtidas: {like}</Text>
            </View>
          </>
        }
      />

   </View>
  );
}
const margin = Platform.OS === 'ios' ? 40 : 0
const largura = Dimensions.get("screen").width;
const styles = StyleSheet.create({
  img:{
    width: largura, 
    height: largura
  },
  container: {
    marginTop: margin
  },
  like:{
    width: 40,
    height: 40,
    margin: 10
  },
  description:{
    margin: 10
  },
  containerLike:{
    flexDirection: 'row',
    alignItems: 'center'
  }
})
2 respostas

Oi Renato tudo bom?

Como vc só tem um componente no seu projeto o estado dele é um só tbm e com isso ele tem funcionado como um estado global ao invés de estar escopado para cada uma das fotos.

Repara que vc só tem uma variável de estado "like" e está usando ela para todas as fotos que recebeu do backend. Por isso, quando vc altera esse estado todas as fotos são curtidas.

veja que no meu caso eu separei em um componente chamado "Foto" e dentro dele que eu tenho um estado "like". Isso significa que cada foto tem seu estado individual e por isso ele curte só aquela foto e não todas

Entendi, então quando eu precisar de vários estados diferentes eu tenho que separar por componente mesmo? como tem só uma tela imaginei que isso não impactaria muito pelo fato do loop criado.