Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Estou tendo o erro " TypeError: undefined is not an object (evaluating '_this.props.foto')"

Não sei se é por causa da minha versão do react-native seja mais nova

Código App:

/**
App
 */

import React, { Fragment } from 'react';
import {
  Dimensions,
  FlatList,
  StyleSheet,
} from 'react-native';

import Post from './src/component/Post';

const width = Dimensions.get("screen").width;//para pegar o tamanho da tela aqui o width

const App = () => {
  const fotos = [
    {id: 1, usuario: 'rafael'},
    {id: 2, usuario: 'alberto'},
    {id: 3, usuario: 'vitor'}
];

  return (

    <FlatList style={styles.container}
    keyExtractor={item => item.id}
    data={fotos}
    renderItem={ ({item}) =>
        <Post foto={item}/>
    }
/>

  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: 20
  },
  cabecalho: {
    margin: 10,
    flexDirection: 'row',
    alignItems: 'center'
  },
  fotoDePerfil: {
    marginRight: 10,
    borderRadius: 20,
    width: 40,
    height: 40
  },
  fotoDoPost: {
    width: width,
    height: width
  }


});

export default App;

Código Post:

/**
Post
 */

import React, { Fragment } from 'react';
import {
    View,
    Text,
    Image,
    Dimensions,
    StyleSheet,
} from 'react-native';

const width = Dimensions.get("screen").width;//para pegar o tamanho da tela aqui o width

const App = () => {



    return (

        <View>
            <View style={styles.cabecalho}>
                <Image source={require('../../resources/img/alfinete.png')}
                    style={styles.fotoDePerfil} />
                <Text>{this.props.foto.usuario}</Text>
            </View>
            <Image source={require('../../resources/img/alfinete.png')}
                style={styles.fotoDoPost} />
        </View>
    );
};

const styles = StyleSheet.create({
    cabecalho: {
        margin: 10,
        flexDirection: 'row',
        alignItems: 'center'
    },
    fotoDePerfil: {
        marginRight: 10,
        borderRadius: 20,
        width: 40,
        height: 40
    },
    fotoDoPost: {
        width: width,
        height: width
    }


});

export default App;
5 respostas

Boa noite, Guilherme! Como vai?

Tente fazer assim e veja se as coisas funcionam como vc esperava:

<FlatList style={styles.container}
    keyExtractor={item => item.id}
    data={fotos}
    renderItem={ (item) =>
        <Post foto={item}/>
    }

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Alterei, mas continua o mesmo erro :(

Opa, Guilherme! Como vai?

Que erro vc está tendo agora? Vc poderia colar aqui o log completo do erro para que eu possa dar uma olhada?

Tirei prints do que está retornando: você pode acessá-los por esse link do google drive: https://drive.google.com/open?id=1P7rGVgJBkRhLBf7Tc8_rj7bPLTRwtm1I

Estou com mesmo erro, alguma solução para esse erro? Obrigada!