React Native - como atualizar FlatList de postagens (novas curtidas, ...)

Question

Introdução

Estou desenvolvendo uma lista de postagens, que está aninhada em uma lista plana que tem um pull para atualizar implementado, e cada postagem (renderizada em um cartão) tem o avatar do usuário que fez o upload. Além disso, é possível que um usuário mude seu avatar, então preciso atualizar os posts FlatList com o novo avatar do usuário.

Eu li algo sobre o adereço ExtraData, mas não funciona no meu caso.

Código

// Posts Screen
export default function Posts(props) {
   const {
      userData: {
         username,
         avatar
      }
   } = props;

   const [data, setData] = useState([]); // [{ avatar, username, photoUri, likes }, ...]

   let previousAvatar = useRef(avatar).current;

   // ... Fetch the data
 
   // This is the wrong(?) stuff I am doing to update the FlatList
    useEffect(() => {
     if (previousAvatar !== avatar) {
       // For each post, change the avatar
       setPosts(
         posts.map((post) => ({
           ...post,
           avatar: avatar,
         }))
       );

       // Save the new avatar
       previousAvatar = avatar;
     }
   }, [ownerData]);


   return (<FlatList data={data} renderIt... />)
   
}

O que estou fazendo

Quando detecto que o usuário alterou seu avatar, modifico os dados que passam para a FlatList, alterando o uri do avatar. Acho que isso é ruim, pois pode haver 100 mil postagens na lista ...

Além disso, preciso atualizar a lista plana quando novas curtidas, novo nome de usuário, ... Então, acho que isso não é viável

O que eu tentei

// Posts Screen
export default function Posts(props) {
   const {
      userData
   } = props;

   ...
    
   return <FlatList data={data} extraData={userData} ... />

}

Na documentação diz "Ao passar extraData para FlatList, garantimos que o próprio FlatList será renderizado novamente quando o estado mudar.", Mas para mim, isso não funciona, pois userData é recebido por meio de props.

Alguma ideia? Obrigado.

Answer 1

flatList irá renderizar os dados e não o extraData. tente definir extraData como um booleano e reverter o valor booleano sempre que precisar atualizar a lista.